این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Jhey Tompkins

در حال حاضر چگونه یک عنصر را به عنصر دیگر متصل می کنید؟ ممکن است سعی کنید موقعیت آنها را ردیابی کنید یا از نوعی عنصر پوشش استفاده کنید.

<!-- index.html -->
<div class="container">
  <a href="/link" class="anchor">I’m the anchor</a>
  <div class="anchored">I’m the anchored thing</div>
</div>

/* styles.css */
.container {
  position: relative;
}
.anchored {
  position: absolute;
}

این راه حل ها اغلب ایده آل نیستند. آنها نیاز به جاوا اسکریپت یا معرفی نشانه گذاری اضافی دارند. هدف CSS Anchor Positioning API حل این مشکل با ارائه یک CSS API برای عناصر تترینگ است. وسیله ای برای قرار دادن و اندازه یک عنصر بر اساس موقعیت و اندازه عناصر دیگر فراهم می کند.

تصویر یک پنجره مرورگر مدل را نشان می دهد که جزئیات آناتومی یک راهنمای ابزار را نشان می دهد.

پشتیبانی از مرورگر

می‌توانید CSS Anchor positioning API را در Chrome Canary پشت پرچم «ویژگی‌های پلتفرم وب آزمایشی» امتحان کنید. برای فعال کردن آن پرچم، Chrome Canary را باز کنید و chrome://flags دیدن کنید. سپس پرچم "ویژگی های پلتفرم وب آزمایشی" را فعال کنید.

همچنین یک polyfill در حال توسعه توسط تیم Oddbird است. حتماً مخزن را در github.com/oddbird/css-anchor-positioning بررسی کنید.

می توانید پشتیبانی لنگر را با موارد زیر بررسی کنید:

@supports(anchor-name: --foo) {
  /* Styles... */
}

توجه داشته باشید که این API هنوز در مرحله آزمایشی است و ممکن است تغییر کند. این مقاله قسمت های مهم را در سطح بالایی پوشش می دهد. پیاده سازی فعلی نیز کاملاً با مشخصات CSS Working Group هماهنگ نیست.

مشکل

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

بخش دیگری از مشکل این است که اگر می‌خواهید مطمئن شوید که عنصر متصل شده در نمای باقی می‌ماند - برای مثال، اگر یک راهنمای ابزار را باز کنید و توسط کران‌های viewport بریده شود. ممکن است این تجربه خوبی برای کاربران نباشد. شما می‌خواهید که راهنمای ابزار سازگار شود.

راه حل های فعلی

در حال حاضر، راه‌های مختلفی وجود دارد که می‌توانید به این موضوع بپردازید.

ابتدا رویکرد ابتدایی "Wrap the Anchor" است. هر دو عنصر را بردارید و در ظرفی بپیچید. سپس می توانید position برای قرار دادن نوک ابزار نسبت به لنگر استفاده کنید.

<div class="containing-block">
  <div class="tooltip">Anchor me!</div>
  <a class="anchor">The anchor</a>
</div>

.containing-block {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

می توانید ظرف را جابجا کنید و همه چیز در بیشتر موارد همان جایی که می خواهید باقی می ماند.

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

<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>

:root {
  --anchor-width: 120px;
  --anchor-top: 40vh;
  --anchor-left: 20vmin;
}

.anchor {
  position: absolute;
  top: var(--anchor-top);
  left: var(--anchor-left);
  width: var(--anchor-width);
}

.tooltip {
  position: absolute;
  top: calc(var(--anchor-top));
  left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
  transform: translate(-50%, calc(-100% - 10px));
}

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

const setAnchorPosition = (anchored, anchor) => {
  const bounds = anchor.getBoundingClientRect().toJSON();
  for (const [key, value] of Object.entries(bounds)) {
    anchored.style.setProperty(`--${key}`, value);
  }
};

const update = () => {
  setAnchorPosition(
    document.querySelector('.tooltip'),
    document.querySelector('.anchor')
  );
};

window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);

این شروع به طرح چند سوال می کند:

چه زمانی استایل ها را محاسبه کنم؟
چگونه استایل ها را محاسبه کنم؟
هر چند وقت یکبار استایل ها را محاسبه می کنم؟

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

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

برای کاهش بخشی از این درد، ممکن است به دنبال راه حل جاوا اسکریپت باشید تا به شما کمک کند. این هزینه اضافه کردن یک وابستگی به پروژه شما را متحمل می شود و بسته به نحوه استفاده از آنها می تواند مشکلات عملکردی را ایجاد کند. به عنوان مثال، برخی از بسته ها از requestAnimationFrame برای درست نگه داشتن موقعیت استفاده می کنند. این بدان معناست که شما و تیمتان باید با بسته و گزینه های پیکربندی آن آشنا شوید. در نتیجه، ممکن است سوالات و تصمیمات شما کاهش نیابد، بلکه تغییر کند. این بخشی از "چرا" برای موقعیت یابی لنگر CSS است. این شما را از فکر کردن به مسائل عملکرد هنگام محاسبه موقعیت دور می کند.

این کد برای استفاده از " floating-ui "، یک بسته محبوب برای این مشکل، چگونه می‌تواند باشد:

import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';

const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')

const updatePosition = () => {  
  computePosition(anchor, tooltip, {
    placement: 'top',
    middleware: [offset(10), flip()]
  })
    .then(({x, y}) => {
      Object.assign(tooltip.style, {
        left: `${x}px`,
        top: `${y}px`
      })
  })
};

const clean = autoUpdate(anchor, tooltip, updatePosition);

سعی کنید لنگر را در این نسخه نمایشی که از آن کد استفاده می‌کند، قرار دهید.

"نکته ابزار" ممکن است آنطور که انتظار دارید رفتار نکند. به خارج شدن از ویوپورت در محور y واکنش نشان می دهد اما نه در محور x. اسناد را بررسی کنید، و احتمالاً راه حلی پیدا خواهید کرد که برای شما مفید باشد.

اما، پیدا کردن بسته ای که برای پروژه شما کار می کند می تواند زمان زیادی را ببرد. این تصمیمات اضافی است و اگر کاملاً آنطور که می خواهید کار نکند می تواند خسته کننده باشد.

استفاده از موقعیت لنگر

CSS Anchor positioning API را وارد کنید. ایده این است که سبک های خود را در CSS خود نگه دارید و تعداد تصمیماتی را که باید بگیرید کاهش دهید. شما امیدوارید که به همین نتیجه برسید، اما هدف این است که توسعه دهنده را بهتر تجربه کنید.

بدون نیاز به جاوا اسکریپت
به مرورگر اجازه دهید بهترین موقعیت را از راهنمایی شما پیدا کند.
دیگر وابستگی به شخص ثالث وجود ندارد
بدون عناصر لفاف.
با عناصری که در لایه بالایی قرار دارند کار می کند.

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

ابتدا باید نحوه تعریف لنگر را انتخاب کنید. شما می توانید این کار را در CSS خود با تنظیم ویژگی anchor-name در عنصر anchor انجام دهید. این یک مقدار شناسایی نقطه چین را می پذیرد.

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

در غیر این صورت، می توانید یک لنگر در HTML خود با ویژگی anchor تعریف کنید. مقدار مشخصه شناسه عنصر لنگر است. این یک لنگر ضمنی ایجاد می کند.

<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>

هنگامی که یک لنگر را تعریف کردید، می توانید از تابع anchor استفاده کنید. تابع anchor 3 آرگومان می گیرد:

عنصر Anchor: anchor-name لنگر مورد استفاده - یا می توانید مقدار را برای استفاده از یک لنگر implicit حذف کنید. می توان آن را از طریق رابطه HTML یا با یک ویژگی anchor-default با مقدار anchor-name تعریف کرد.
Anchor side: کلمه کلیدی از موقعیتی که می خواهید استفاده کنید. این می تواند top ، right ، bottom ، left ، center و غیره باشد. یا می توانید درصدی را پاس کنید. به عنوان مثال، 50٪ برابر با center خواهد بود.
Fallback: این یک مقدار بازگشتی اختیاری است که طول یا درصد را می پذیرد.

شما از تابع anchor به عنوان مقداری برای خصوصیات داخلی ( top ، right ، bottom ، left ، یا معادل های منطقی آنها) عنصر لنگر استفاده می کنید. همچنین می توانید از تابع anchor در calc استفاده کنید:

.boat {
  bottom: anchor(--my-anchor top);
  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}

 /* alternative with anchor-default */
.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: calc(anchor(center) - (var(--boat-size) * 0.5));
}

هیچ خاصیت inset center وجود ندارد، بنابراین اگر اندازه عنصر لنگر را می‌دانید، یکی از گزینه‌ها استفاده از calc است. چرا از translate استفاده نمی کنید؟ می توانید از این استفاده کنید:

.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

اما، مرورگر موقعیت های تغییر یافته را برای عناصر لنگر در نظر نمی گیرد. روشن خواهد شد که چرا این مهم هنگام در نظر گرفتن تغییر موقعیت و موقعیت یابی خودکار مهم است.

توجه: در زمان نوشتن، تعریف anchor-name با ویژگی anchor برای عناصر غیر Popover اجرا نمی‌شود. در اینجا یک نسخه نمایشی است که باید به زودی کار کند.

ممکن است متوجه استفاده از ویژگی سفارشی --boat-size در بالا شده باشید. اما، اگر می خواهید اندازه عنصر لنگر را بر اساس اندازه لنگر قرار دهید، می توانید به آن اندازه نیز دسترسی داشته باشید. به جای اینکه خودتان آن را محاسبه کنید، می توانید از تابع anchor-size استفاده کنید. به عنوان مثال، برای اینکه قایق خود را چهار برابر عرض لنگر خود بسازیم:

.boat {
  width: calc(4 * anchor-size(--my-anchor width));
}

همچنین با anchor-size(--my-anchor height) به ارتفاع نیز دسترسی دارید. و می توانید از آن برای تنظیم اندازه هر یک از محورها یا هر دو استفاده کنید.

اگر بخواهید به عنصری با موقعیت absolute لنگر بزنید چه؟ قاعده این است که عناصر نمی توانند خواهر و برادر باشند. در این صورت می توانید لنگر را با ظرفی بپیچید که موقعیت relative دارد. سپس می توانید به آن لنگر بزنید.

<div class="anchor-wrapper">
  <a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>

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

ردیابی موقعیت اسکرول

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

.boat { anchor-scroll: --my-anchor; }

این نسخه ی نمایشی را امتحان کنید که در آن می توانید anchor-scroll با چک باکس موجود در گوشه خاموش و روشن کنید.

این قیاس در اینجا کمی صاف است، زیرا در یک دنیای ایده آل، قایق و لنگر شما هر دو در آب هستند. همچنین، ویژگی هایی مانند Popover API باعث می شود که بتوان عناصر مرتبط را نزدیک نگه داشت. موقعیت لنگر با عناصری که در لایه بالایی قرار دارند کار می کند. این یکی از مزایای اصلی API است: امکان اتصال عناصر در جریان های مختلف.

این نسخه ی نمایشی را در نظر بگیرید که دارای یک محفظه اسکرول با لنگرهایی است که دارای نکات ابزار هستند. عناصر راهنمای ابزار که پاپاور هستند ممکن است در کنار لنگرها قرار نگیرند:

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

هشدار: ویژگی‌هایی مانند anchor-size و anchor-scroll هنوز در حال توسعه هستند. آنها می توانند بر اساس ورودی شما از آزمایش API تغییر کنند.

موقعیت بازگشتی و موقعیت یابی خودکار

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

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

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

قبل از ایجاد یک position-fallback صریح، موقعیت یابی لنگر موقعیت یابی خودکار را نیز ارائه می دهد. شما می توانید با استفاده از مقدار auto در تابع anchor و در ویژگی inset مقابل، آن تلنگر را به صورت رایگان دریافت کنید. برای مثال، اگر anchor برای bottom استفاده می‌کنید، top روی auto قرار دهید.

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor auto);
  top: auto;
}

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

position-fallback که سعی می‌کند نکات ابزار بالا و زیر را نمایش دهد، می‌تواند به شکل زیر باشد:

@position-fallback --top-to-bottom {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}

اعمال آن در راهنمای ابزار به شکل زیر است:

.tooltip {
  anchor-default: --my-anchor;
  position-fallback: --top-to-bottom;
}

استفاده از anchor-default به این معنی است که می توانید position-fallback برای عناصر دیگر مجدداً استفاده کنید. همچنین می‌توانید از یک ویژگی سفارشی scoped برای تنظیم anchor-default استفاده کنید.

توجه: توجه داشته باشید که برخی از سبک‌های عامل کاربر ممکن است ویژگی‌های inset را برای شما تنظیم کنند. در این موارد، ممکن است بخواهید قبل از تعریف position-fallback ، اینها را از حالت تنظیم خارج کنید. یک مثال عناصری است که از ویژگی popover استفاده می کنند. اعمال inset: unset; کار خواهد کرد.

این دمو را دوباره با استفاده از قایق در نظر بگیرید. یک مجموعه position-fallback وجود دارد. همانطور که موقعیت لنگر را تغییر می دهید، قایق برای ماندن در ظرف تنظیم می شود. سعی کنید مقدار padding را نیز تغییر دهید تا لایه بدنه را تنظیم کنید. توجه داشته باشید که چگونه مرورگر موقعیت یابی را تصحیح می کند. موقعیت ها با تغییر تراز شبکه ای کانتینر در حال تغییر هستند.

position-fallback این بار پرمخاطب تر است و موقعیت ها را در جهت عقربه های ساعت امتحان می کند.

.boat {
  anchor-default: --my-anchor;
  position-fallback: --compass;
}

@position-fallback --compass {
  @try {
    bottom: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    right: anchor(left);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }
}

نمونه ها

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

منوهای زمینه

بیایید با منوی زمینه با استفاده از Popover API شروع کنیم. ایده این است که کلیک کردن روی دکمه با شورون منوی زمینه را نشان می دهد. و آن منو منوی خاص خود را برای گسترش خواهد داشت.

نشانه گذاری در اینجا بخش مهمی نیست. اما، هر کدام سه دکمه با استفاده از popovertarget دارید. سپس سه عنصر با استفاده از ویژگی popover دارید. این به شما این امکان را می دهد که منوهای زمینه را بدون جاوا اسکریپت باز کنید. که می تواند شبیه این باشد:

<button popovertarget="context">
  Toggle Menu
</button>        
<div popover="auto" id="context">
  <ul>
    <li><button>Save to your Liked Songs</button></li>
    <li>
      <button popovertarget="playlist">
        Add to Playlist
      </button>
    </li>
    <li>
      <button popovertarget="share">
        Share
      </button>
    </li>
  </ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>

اکنون، می توانید یک position-fallback تعریف کنید و آن را بین منوهای زمینه به اشتراک بگذارید. ما مطمئن می‌شویم که سبک‌های inset را برای پاپ‌اورها نیز تنظیم کنیم.

[popovertarget="share"] {
  anchor-name: --share;
}

[popovertarget="playlist"] {
  anchor-name: --playlist;
}

[popovertarget="context"] {
  anchor-name: --context;
}

#share {
  anchor-default: --share;
  position-fallback: --aligned;
}

#playlist {
  anchor-default: --playlist;
  position-fallback: --aligned;
}

#context {
  anchor-default: --context;
  position-fallback: --flip;
}

@position-fallback --aligned {
  @try {
    top: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }

  @try {
    top: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(bottom);
    left: anchor(right);
  }

  @try {
    right: anchor(left);
    bottom: anchor(bottom);
  }
}

@position-fallback --flip {
  @try {
    bottom: anchor(top);
    left: anchor(left);
  }

  @try {
    right: anchor(right);
    bottom: anchor(top);
  }

  @try {
    top: anchor(bottom);
    left: anchor(left);
  }

  @try {
    top: anchor(bottom);
    right: anchor(right);
  }
}

این به شما یک UI منوی زمینه تودرتو تطبیقی را می دهد. سعی کنید موقعیت محتوا را با انتخاب تغییر دهید. گزینه ای که انتخاب می کنید، تراز شبکه را به روز می کند. و این بر نحوه موقعیت یابی لنگرها تأثیر می گذارد.

تمرکز کنید و دنبال کنید

این نسخه ی نمایشی با وارد کردن :has() ابتدا CSS را ترکیب می کند. ایده انتقال یک نشانگر بصری برای input است که دارای تمرکز است.

این کار را با تنظیم یک لنگر جدید در زمان اجرا انجام دهید. برای این نسخه ی نمایشی، یک ویژگی سفارشی با محدوده در فوکوس ورودی به روز می شود.

#email {
    anchor-name: --email;
  }
  #name {
    anchor-name: --name;
  }
  #password {
    anchor-name: --password;
  }
:root:has(#email:focus) {
    --active-anchor: --email;
  }
  :root:has(#name:focus) {
    --active-anchor: --name;
  }
  :root:has(#password:focus) {
    --active-anchor: --password;
  }

:root {
    --active-anchor: --name;
    --active-left: anchor(var(--active-anchor) right);
    --active-top: calc(
      anchor(var(--active-anchor) top) +
        (
          (
              anchor(var(--active-anchor) bottom) -
                anchor(var(--active-anchor) top)
            ) * 0.5
        )
    );
  }
.form-indicator {
    left: var(--active-left);
    top: var(--active-top);
    transition: all 0.2s;
}

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

محاسبه نمودار میله ای

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

شما می توانید بالاترین و کمترین مقادیر را با استفاده از min و max CSS ردیابی کنید. CSS برای آن می تواند چیزی شبیه به این باشد:

.chart__tooltip--max {
    left: anchor(--chart right);
    bottom: max(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
    translate: 0 50%;
  }

مقداری جاوا اسکریپت برای به روز رسانی مقادیر نمودار و مقداری CSS برای استایل دادن به نمودار وجود دارد. اما موقعیت لنگر از به روز رسانی های چیدمان برای ما مراقبت می کند.

تغییر اندازه دستگیره ها

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

شما می توانید نقاط لنگر را مانند دسته های تغییر اندازه سفارشی در نظر بگیرید و به یک مقدار inset متمایل شوید.

.container {
   position: absolute;
   inset:
     anchor(--handle-1 top)
     anchor(--handle-2 right)
     anchor(--handle-2 bottom)
     anchor(--handle-1 left);
 }

در این دمو، GreenSock Draggable دستگیره ها را قابل کشیدن می کند. اما، عنصر <img> برای پر کردن ظرفی که برای پر کردن شکاف بین دستگیره‌ها تنظیم می‌شود، اندازه تغییر می‌کند.

انتخاب منو؟

این آخری برای اتفاقاتی که در راه است کمی آزار دهنده است. اما، شما می توانید یک پاپاور قابل تمرکز ایجاد کنید و اکنون موقعیت لنگر دارید. شما می توانید پایه های یک عنصر <select> قابل استایل ایجاد کنید.

<div class="select-menu">
<button popovertarget="listbox">
 Select option
 <svg>...</svg>
</button>
<div popover="auto" id="listbox">
   <option>A</option>
   <option>Styled</option>
   <option>Select</option>
</div>
</div>

یک anchor ضمنی این کار را آسان تر می کند. اما، CSS برای یک نقطه شروع ابتدایی می تواند به شکل زیر باشد:

[popovertarget] {
 anchor-name: --select-button;
}
[popover] {
  anchor-default: --select-button;
  top: anchor(bottom);
  width: anchor-size(width);
  left: anchor(left);
}

ویژگی های Popover API را با موقعیت یابی CSS Anchor ترکیب کنید و به آن نزدیک می شوید.

وقتی شروع به معرفی چیزهایی مانند :has() می کنید، خیلی خوب است. می توانید نشانگر را در حالت باز بچرخانید:

.select-menu:has(:open) svg {
  rotate: 180deg;
}

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

همین!

بستر وب در حال تکامل است. موقعیت یابی لنگر CSS بخش مهمی برای بهبود نحوه توسعه کنترل های UI است. این شما را از برخی از آن تصمیمات فریبنده دور می کند. اما به شما امکان می دهد کارهایی را انجام دهید که قبلاً هرگز نتوانسته اید انجام دهید. مانند استایل دادن به عنصر <select> ! نظر خود را با ما در میان بگذارید.

عکس توسط CHUTTERSNAP در Unsplash