تابع attr()

یک تابع CSS که می تواند مقدار هر attribute عنصر را دریافت کند و سپس مستقیماً از این مقدار در استایل ها استفاده کند

رایج ترین موارد استفاده از این تابع ایجاد یک tooltip و همچنین نمایش مقدار ویژگی href در لینک ها هنگام پرینت صفحه است.

@media print {
  a::after {
    content: " [" attr(href) "]";
  }
}

#️⃣#tip
🆔@IR_javascript

‌‌‏Monolith یک ابزار CLI برای ذخیره کامل صفحات وب

مونولیت نه تنها سند html مورد نظر را ذخیره می کند، بلکه دارایی های CSS، تصویر و جاوا اسکریپت را به یکباره دانلود می کند و یک سند HTML5 تولید می کند که ذخیره و اشتراک گذاری آن راحت است و صفحه ذخیره‌شده را دقیقاً به همان شکلی که در اینترنت بود ارائه می دهد، حتی زمانی که اتصال شبکه در دسترس نیست.

🔗https://crates.io/crates/monolith


#️⃣#tool
🆔@IR_javascript

حرکات اصلاحی
امروزه بی تحرکی و پشت میز نشینی یکی از معضلات جامعه کنونی است که می تواند منجر به ایجاد عارضه #سر_به_جلو و افتادگی شانه‌ها گردد.
حرکت اصلاحی بالا آوردن دست‌ها خوابیده به شکم با تقویت عضله ذوزنقه‌ای میانی و کمربند شانه‌ای به بهبود این عارضه کمک کند [+منبع].

#️⃣#exercise
🆔@IR_javascript

Safe alignment flexbox
‎
‏safe alignment — باعث می شود که مرورگر همیشه عناصر را در دسترس کاربر قرار دهد و هیچ محتوایی در حالت ریسپانسیو از بین نمی رود.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
}

//وضعیت محتوا در مناسب نیست و وقتی به ابتدا آن اسکرول می کنید بخشی از اطلاعات از دست رفته است

.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 50%;
}

//در این حالت وقتی به ابتدا آن اسکرول می کنید همه محتوا در دسترس است

🔗https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

#️⃣#tip #css
🆔@IR_javascript