مقالات

نگاه اول به attr() مدرن

تصویر admin admin6 روز پیش
0 0 خواندن این مطلب 7 دقیقه زمان میبرد
نگاه اول به attr() مدرن


استاد چیدمان

پیام نویسنده!

من سالها در این وبلاگ به آموزش چیدمان CSS پرداخته ام. گذاشتم
تمام چیزی که من می دانم استاد چیدمان دوره: 70+ درس و 150+ مثال تعاملی که آموزش می دهند
شما چگونه در مورد طرح‌بندی‌های CSS فکر کنید، نه فقط نحو را حفظ کنید.

مقدمه

ممکن است استفاده کرده باشید attr() قبل از دریافت محتوای متنی برای یک شبه عنصر، در CSS عمل کنید.

p data-title="This text is before the title">Hello Worldp>

.title:before {
  content: attr(data-title);
}

نتیجه به شرح زیر است:

در اینجا هیچ چیز جدید یا ابتکاری وجود ندارد، برای برخی موارد مفید است.

با این حال، وقتی می خواهیم از یک مقدار غیر متنی استفاده کنیم، این کار نمی کند. در HTML زیر اضافه کردم data-color ویژگی از p عنصر

p data-color="red">CSS is awesomep>

و سپس از ویژگی در CSS استفاده می کند.

.title:before {
  color: attr(data-color);
}

این کار نمی کند زیرا attr() تابع فقط از مقادیر متنی پشتیبانی می کند.

attr() مدرن

حالا میتونیم استفاده کنیم attr() و نوع مقداری را که می خواهیم استفاده کنیم را تعریف کنیم.

نحو attr

برای مثال، در این مورد باید مقدار رنگ را بدست آوریم.

p data-color="red">CSS is awesomep>

.title:before {
  color: attr(data-color type());
}

بر اساس MDN، نوع داده جدید می تواند مقادیر مختلفی داشته باشد:

را type() تابع a می گیرد به عنوان آرگومان آن، که مشخص می کند مقدار را در چه نوع داده ای تجزیه کنیم. را می تواند باشد ، ، ، ، ، ، ، ، ، ، ، ، ، یا ترکیبی از آنها.

این به ما انعطاف‌پذیری جدیدی می‌دهد که قبلاً نداشتیم. کجا ممکن است مفید باشد؟ این چیزی است که در این مقاله بررسی خواهم کرد.

تشخیص ویژگی

ما می توانیم پشتیبانی مدرن attr() را با CSS بررسی کنیم @supports. در اینجا یک مثال است:

@supports (x: attr(x type(*))) {
  
}

اگر از Sass استفاده می کنید، موارد فوق تجزیه نمی شوند. من از آن فرار کردم تا کار کند .scss فایل ها:

@supports (#{"x: attr(x type(*))"}) {
  
}

موارد استفاده مدرن attr()

شماره ستون ها را تنظیم کنید

هنگام استفاده از یک شبکه CSS، می‌توانیم شماره ستون‌ها را به هر فرزند شبکه اختصاص دهیم.

در این مثال من تعریف کردم data-col-start و data-col-end روی یک عنصر شبکه برای تنظیم شروع و پایان ستون.

در CSS می توانم اعداد را به این صورت استخراج کنم:

.layout {
  > * {
    grid-column-start: attr(data-col-start type(), 2);
    grid-column-end: attr(data-col-end type(), 3);
  }
}

اگر خصیصه تنظیم نشده باشد، به حالت اولیه برمی گردد 2 و 3 همانطور که مشخص کردم با نسخه ی نمایشی زیر بازی کنید و ببینید چگونه کار می کند:

div data-col-start="1" data-col-end="-1">
  img src="desk.jpg" alt="" />
div>

Lorem ipsum dolor، sit amet consectetur adipisicing elit. Quam deleniti officia or nolla vero cumqu.

Veritatis، tempore itaecusumus alias voluptate illum cupiditate eius incidunt et laudantium؟

اگر صفات تنظیم نشده باشند، grid-column-start و grid-column-end به طور پیش فرض مقادیر بازگشتی تنظیم خواهند شد.

دمو زیر را بررسی کنید:

div data-col-start="1" data-col-end="-1">
  img src="desk.jpg" alt="" />
div>

Lorem ipsum dolor، sit amet consectetur adipisicing elit. Quam deleniti officia or nolla vero cumqu.

Veritatis، tempore itaecusumus alias voluptate illum cupiditate eius incidunt et laudantium؟

به ردیف های فیلد متنی دسترسی پیدا کنید

می توانیم استفاده کنیم rows ویژگی و ضرب آن در یک عدد آستانه.

textarea {
  min-height: calc(attr(rows type()) * 50px);
}

دمو زیر را بررسی کنید:

textarea rows="3">textarea>

توضیح کوتاهی از ایده محصول خود بنویسید: