موقعیت لنگر

هنگامی که یک راهنمای ابزار یا یک منوی کشویی را قرار می دهید، اغلب می خواهید آن را نسبت به عنصر دیگری در صفحه قرار دهید. در حالی که روش‌هایی با استفاده از موقعیت‌یابی مطلق برای دستیابی به این اثر وجود داشته است، الزامات پیچیده‌تر از لحاظ تاریخی به موقعیت‌یابی موارد با استفاده از جاوا اسکریپت متوسل شده‌اند.

موقعیت یابی لنگر CSS راهی را برای قرار دادن یک عنصر نسبت به عنصر دیگر ارائه می دهد.

عناصر اتصال به اینترنت

برای اینکه یک عنصر را به لنگر تبدیل کنید، یک مقدار anchor-name از هر رشته ای که با دو خط تیره شروع می شود به آن می دهید. این شناسه‌ای است که عنصر موقعیت‌یافته برای یافتن لنگر خود از آن استفاده می‌کند، و دادن یک نام توصیفی به آن مفید است. حتی می‌توانید به یک عنصر چندین نام لنگر بدهید، اگر به روش‌های مختلف به عنوان لنگر استفاده شود.

شما باید چند ویژگی را روی عنصر موقعیت‌یافته تنظیم کنید تا بتوان آن را متصل کرد. ابتدا باید با تنظیم position: absolute یا position: fixed ، عنصر را از جریان سند بیرون بکشید تا شناور شود.

در مرحله بعد، با تنظیم position-anchor به نام لنگر که روی لنگر تنظیم کرده اید، باید تعیین کنید که به کدام لنگر می خواهید متصل شوید.

در نهایت، باید نحوه قرار دادن لنگر را تنظیم کنید. بعداً در این ماژول در مورد position-area بیشتر خواهید آموخت.

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

تترهای ضمنی

اتصال پاپوورها حتی ساده تر است. وقتی پاپاور را با استفاده از یک دکمه با popovertarget یا با تنظیم یک source با showPopover({source}) باز می‌کنید، پاپاور یک "لنگر ضمنی" از قبل تنظیم شده است. از آنجایی که یک پاپاور از قبل با position: fixed ، برای قرار دادن پاپاور، تنها کاری که باید انجام دهید این است که موقعیت را تنظیم کنید.

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

تعیین محدوده لنگرهای بالقوه

می توانید موقعیت لنگر را به عنوان بخشی از یک مؤلفه پیاده سازی کنید، به طوری که می توانید از یک الگوی مانند یک منوی کشویی در مکان های مختلف استفاده کنید. اگر چندین بار از یک anchor-name استفاده می‌کنید، چگونه مطمئن می‌شوید که هر عنصر قرار گرفته، لنگر صحیح را پیدا می‌کند؟

راه‌حل‌های جاوا اسکریپت شامل افزودن شناسه‌های منحصربه‌فرد به هر لنگر، و سپس ارجاع به آن از عنصر موقعیت‌یافته است. این کار دست و پا گیر می شود و CSS راه حل ساده تری با anchor-scope دارد.

ویژگی anchor-scope مجموعه ای است که نام لنگرها فقط در بین یک عنصر و فرزندان آن مطابقت داده می شود. فهرستی از یک یا چند نام لنگر یا کلمه کلیدی all را می‌پذیرد تا دامنه همه نام‌های لنگر تعریف شده را محدود کند.

یک anchor-scope به طور ایده‌آل به یک اجداد عنصر موقعیت‌یافته و عنصر لنگر اضافه می‌شود که شامل سایر عناصر لنگر با همین نام نیست. اغلب، این روی ریشه مولفه قابل استفاده مجدد است.

مثال زیر تفاوت anchor-scope را هنگام اعمال بر عناصر تکراری با همان anchor-name نشان می‌دهد. در مثال، همه عناصر <img> و بنرهای تصویر به نام --image anchor اشاره می کنند. هنگامی که anchor-scope روی عناصر <li> اعمال می شود، position-anchor: --image فقط با عنصر <img> در همان عنصر <li> به عنوان بنر مطابقت دارد، در غیر این صورت با آخرین رندر <img> مطابقت خواهد داشت.

موقعیت یابی

اکنون که عنصر را به لنگر خود متصل کرده اید، زمان آن رسیده است که آن را در موقعیت قرار دهید. موقعیت یابی لنگر دو روش را برای موقعیت یابی ارائه می دهد - position-area و تابع anchor() .

position-area

ویژگی position-area به شما امکان می دهد با تعیین یک یا دو کلمه کلیدی، یک عنصر را در اطراف لنگر قرار دهید. این موارد بسیاری از موارد استفاده متداول را پوشش می دهد و اغلب محل خوبی برای شروع است.

نحوه عملکرد position-area

position-area با ایجاد یک بلوک حاوی جدید برای عنصر موقعیت‌یافته در ناحیه‌ای که توسط لبه‌های لنگر و بلوک حاوی اصلی عنصر موقعیت‌یافته ایجاد می‌شود، کار می‌کند.

در حالی که کلمات کلیدی زیادی برای position-area وجود دارد، می توان آنها را به چند دسته تقسیم کرد تا قابل درک تر شود. Anchor-tool.com یک ابزار عالی برای کاوش در نحو است.

کلمات کلیدی فیزیکی

می توانید از کلیدواژه های فیزیکی top ، left ، bottom ، right و center استفاده کنید. به عنوان مثال، position-area: top right عنصر قرار گرفته را در بالا و سمت راست لنگر قرار می دهد. این کلمات کلیدی همچنین دارای معادل‌های محور فیزیکی، y-start ، x-start ، y-end و x-end هستند.

کلمات کلیدی منطقی

همچنین می توانید از کلمات کلیدی منطقی، block-start ، block-end ، inline-start و inline-end استفاده کنید. به عنوان مثال، position-area: block-end inline-start عنصر قرار گرفته را در زیر و در سمت چپ لنگر در زبان هایی مانند انگلیسی، یا بعد از لنگر در محور بلوک و قبل از لنگر در محور درون خطی در حالت نوشتن سند قرار می دهد. center همچنین می تواند با یک کلمه کلیدی منطقی استفاده شود.

همچنین اگر کلیدواژه‌های منطقی را مشخص می‌کنید، می‌توانید محور را حذف کنید، ابتدا محور بلوک و دوم محور درون خطی. position-area: start end همان position-area: block-start inline-end یا حتی position-area: inline-end block-start .

پوشا مناطق شبکه های متعدد

تا کنون، ممکن است متوجه شده باشید که این گزینه‌ها فقط به شما اجازه می‌دهند عنصر موقعیت‌یافته را در یک فضای شبکه قرار دهید. افزودن پیشوند span به خصوصیات فیزیکی یا منطقی، فضای شبکه مرکزی مجاور را اضافه می کند. position-area: span-top right در سمت راست لنگر و از پایین لنگر به بالای بلوک اصلی عنصر قرار داده شده قرار می گیرد.

یک ناحیه موقعیت رایج برای یک منوی کشویی position-area: block-end span-inline-end .

کلمه کلیدی span-all شامل 3 سطر یا ستون است.

تک کلمه کلیدی

اگر فقط یک کلمه کلیدی را تنظیم کنید، محور دیگر به طور خودکار تنظیم می شود. این تا حد زیادی همانطور که انتظار دارید کار کند، کار می کند، اما ممکن است درک نحوه عملکرد آن مفید باشد.

اگر کلمه کلیدی ارائه شده در مورد محور خود واضح باشد، محور دیگر به عنوان span-all محاسبه می شود. این بدان معنی است که position-area: bottom معادل position-area: bottom span-all است، و عنصر قرار گرفته زیر لنگر خواهد بود و کل عرض بلوک حاوی را در دسترس خواهد داشت.

از طرف دیگر، اگر کلمه کلیدی به وضوح یک محور را نشان ندهد، تکرار می شود. position-area: start معادل start start است و در زبان های چپ به راست در بالای سمت چپ لنگر قرار می گیرد.

تابع anchor() .

برای موارد استفاده پیشرفته تر، position-area ممکن است نیازهای شما را برآورده نکند. تابع anchor() به شما این امکان را می دهد که خصوصیات inset فردی را بر اساس موقعیت عنصر دیگر تنظیم کنید. این به یک طول CSS تبدیل می شود، به این معنی که می توانید از آن در محاسبات و سایر توابع CSS استفاده کنید. علاوه بر این، می توانید اضلاع مختلف را به لنگرهای مختلف متصل کنید.

تابع anchor() یک نام anchor و یک anchor side می گیرد. اگر عنصر شما دارای یک لنگر پیش‌فرض است که با position-anchor یا به طور ضمنی تنظیم شده است، برای مثال با پاپاور، می‌توانید نام انکر را حذف کنید.

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

مقادیر بازگشتی

اگر یک anchor برای تابع anchor() پیدا نشود، کل اعلان نامعتبر خواهد بود. این ممکن است اتفاق بیفتد اگر لنگر بعد از عنصر موقعیت‌یافته ارائه شود، یا اگر عنصری با anchor-name منطبق وجود نداشته باشد. برای انجام این کار، می توانید طول یا درصد بازگشتی را تنظیم کنید.

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

در مثال قبلی، مقدار سمت چپ عنصر موقعیت‌یافته به --focused-anchor لنگر می‌زند، اما آن anchor-name تنها زمانی وجود دارد که اولین دکمه در ماوس یا فوکوس باشد. از آنجایی که یک تابع anchor() تا یک طول مشخص می شود، می توانید از anchor دیگری به عنوان یک بازگشت استفاده کنید. اگر بازگشتی ارائه نمی‌کردیم، عنصر موقعیت‌یافته قرار نمی‌گرفت.

کلیدواژه های جانبی لنگر

مقدار سمت لنگر انتخاب می کند که کدام یک از لبه های لنگر در مقابل قرار گیرد. مشابه position-area ، مقدار جانبی لنگر از چندین نوع مختلف نحو پشتیبانی می‌کند.

این مثال نشان می دهد که چگونه یک مقدار درصد همیشه از ابتدا تا انتها در محور مشخص شده می رود:

استفاده از anchor()

از آنجا که anchor() یک طول است، بسیار انعطاف پذیر است. می توانید مقدار را با توابع CSS مانند max() و calc() دستکاری کنید.

یک محدودیت این است که شما فقط می توانید از توابع anchor() در ویژگی های inset استفاده کنید.

مثال قبلی پس‌زمینه‌ای را در پشت پانل جزئیات باز اضافه می‌کند که با باز شدن یک پانل دیگر، به آرامی متحرک می‌شود و تا پانل جزئیات شناور شده را در بر می‌گیرد. برای انجام این کار، از min() برای انتخاب طول کوچکتر بین دو لنگر استفاده می کند.

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

این مثال همچنین از calc() برای اضافه کردن فضای درون خطی در اطراف پانل باز استفاده می کند.

با استفاده از اندازه لنگر

همچنین می‌توانید از تابع anchor-size() برای استفاده از ابعاد لنگر برای اندازه، موقعیت یا حاشیه عنصر قرار داده شده خود استفاده کنید.

anchor-size() یک نام anchor می گیرد یا از anchor پیش فرض استفاده می کند. به طور پیش‌فرض، از اندازه لنگر در محوری که استفاده می‌شود استفاده می‌کند، بنابراین width: anchor-size() عرض لنگر را برمی‌گرداند. همچنین می‌توانید از محور دیگر با تعیین طول مورد نظر خود با کلیدواژه‌های فیزیکی width و height یا کلیدواژه‌های منطقی block ، inline ، self-block و self-inline استفاده کنید.

رسیدگی به سرریز

شما یک جزء منوی کشویی ایجاد کرده اید و از موقعیت لنگر برای قرار دادن منوی کشویی در جایی که می خواهید برود استفاده کرده اید. اما سپس منو را به سمت دیگر صفحه منتقل می‌کنید یا از آن برای منوی کاربری استفاده می‌کنید و نام کاربر بسیار طولانی است. ناگهان، منوی کشویی شما از صفحه خارج می شود. حالا چی؟

موقعیت یابی لنگر CSS دارای یک سیستم داخلی است که به شما اجازه می دهد تا زمانی که عنصر موقعیت یابی شما به خارج از بلوک حاوی آن ختم می شود، به سرعت مجموعه ای قوی از بازگشت ها بسازید.

گزینه های بازگشتی

قانون position-try-fallbacks فهرستی از گزینه های بازگشتی را می گیرد. هنگامی که موقعیت پیش فرض سرریز می شود، هر گزینه به ترتیب امتحان می شود تا زمانی که موقعیتی وجود داشته باشد که سرریز نشود.

شما می توانید از هر مقدار position-area به عنوان گزینه بازگشتی استفاده کنید. در این مثال، در حالت‌های نوشتاری چپ به راست مانند انگلیسی، عنصر موقعیت‌یافته سعی می‌کند در پایین لنگر قرار گیرد و ستون‌های مرکزی و راست را در بر بگیرد. اگر سرریز شود، سعی می‌کند در پایین لنگر قرار گیرد و ستون‌های چپ و مرکز را در بر بگیرد. اگر آن نیز سرریز شود، موقعیت به موقعیت پیش‌فرض برمی‌گردد، حتی اگر سرریز شود.

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

همچنین چندین کلمه کلیدی flip- وجود دارد که موارد رایج بازگشتی را مدیریت می کند. flip-block و flip-inline سعی کنید عنصر را روی بلوک و محورهای درون خطی بچرخانید. همچنین می‌توان آن‌ها را با flip-block flip-inline ترکیب کرد تا روی هر دو محور چرخانده شود. مقدار flip-start عنصر قرار گرفته را روی یک خط مورب از ابتدا تا انتهای لنگر می چرخاند.

همچنین می‌توانید با @position-try یک گزینه بازگشتی سفارشی ایجاد کنید — این به شما امکان می‌دهد حاشیه‌ها، تراز و حتی تغییر لنگر را تنظیم کنید.

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

flip-block و flip-inline را می‌توان به گزینه‌های بازگشتی @position-try برای ایجاد یک نوع اضافه کرد.

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

در مثال قبل، مرورگر این مراحل را دنبال می‌کند و به محض یافتن راه‌حلی که سرریز نمی‌شود، متوقف می‌شود.

1. عنصر با position-area: end ، در سمت راست پایین لنگر.
2. اگر سرریز شود، عنصر با گزینه بازگشتی سفارشی به نام --bottom-span-right قرار می گیرد، که آن را با position-area: bottom span-right ، با یک حاشیه اضافی در زیر قرار می دهد.
3. اگر سرریز شود، عنصر با flip-inline --bottom-span-right قرار می‌گیرد که گزینه بازگشت سفارشی را با flip-inline ترکیب می‌کند که اساساً position-area: bottom span-left .
4. اگر سرریز شود، عنصر با استفاده از گزینه بازگشتی سفارشی --use-alternate قرار می گیرد که آن را زیر یک لنگر کاملا متفاوت قرار می دهد.
5. اگر آن سرریز شود، عنصر به جای اصلی خود باز می گردد، با position-area: end ، حتی اگر مشخص باشد که سرریز است.

سفارش بازگشتی

به‌طور پیش‌فرض، وقتی موقعیت اولیه سرریز می‌شود، مرورگر هر گزینه را در position-try-fallbacks امتحان می‌کند تا زمانی که موقعیتی پیدا شود که سرریز نشود. می‌توانید این رفتار را با position-try-order لغو کنید تا هر گزینه بازگشتی را آزمایش کنید و از گزینه‌ای که بیشترین فضا را در یک محور مشخص دارد استفاده کنید.

می توانید محور را با کلیدواژه های منطقی، most-block-size و most-inline-size ، یا با کلیدواژه های فیزیکی most-height و most-width مشخص کنید.

position-try-order و position-try-fallbacks می توان با خلاصه نویسی position-try ترکیب کرد، در حالی که مرتبه اول است.

پیمایش

زمانی که کاربر اسکرول می کند، انتظار دارد صفحه روان حرکت کند. برای انجام این کار، مرورگرها محدودیت هایی در مورد نحوه استفاده از موقعیت لنگر هنگام اسکرول دارند.

در حالی که می‌توانید یک عنصر قرار گرفته را به لنگرها در محفظه‌های اسکرول مختلف متصل کنید، عنصر فقط در پاسخ به یکی از لنگرهای پیمایش حرکت می‌کند. این لنگر پیش‌فرض خواهد بود، که یا لنگر ضمنی از یک popover یا مقدار position-anchor است.

متوجه خواهید شد که عنصر قرار گرفته حتی زمانی که لنگر خارج از دید قرار می گیرد، قابل مشاهده می ماند. برای پنهان کردن عنصر موقعیت‌یافته زمانی که لنگر مخفی است، position-visibility: anchors-visible را تنظیم کنید. این نه تنها برای زمانی که لنگر بیش از حد اسکرول می‌شود، اعمال می‌شود، بلکه اگر به روش‌های دیگری مخفی شود، برای مثال با visibility: hidden .

درک خود را بررسی کنید