IShadeed offers insights into frontend development, CSS architecture, and web design principles, providing tutorials, articles, and workshops to help developers master CSS and create visually appealing user interfaces. By exploring IShadeed's curated content, developers can learn about CSS layout techniques, responsive design patterns, and CSS animation effects for enhancing the look and feel of web applications. Whether you're a frontend developer, UI designer, or CSS enthusiast, IShadeed offers resources to improve your CSS skills and elevate your frontend development projects.

Ahmad Shadeed

This post explores the modern usage of the attr() function in CSS, highlighting its ability to handle various data types beyond text, such as color, length, and time. It demonstrates practical use cases including assigning column numbers in CSS grids, setting animation delays, adjusting textarea rows, and defining background images. Modern attr() offers flexibility and improves separation of concerns and reduces CSS conflicts, making CSS more modular and maintainable. Currently supported only in Chrome.

First Look at The Modern attr()

Great!
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility" target="_blank" rel="noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility</a>

Super interesting! Looking forward to this being more supported. CSS seems to ramp up and starts to look like an actual programming language ;)

This is an amazing post. Thank you for showcasing all those ideas.

Ngl; This is the first actuall usefull post i’ve seen - after several weeks of being on daily.dev

I’ts awesome, but still works mostly in latest chrome. To simulate some simple behavior of that in non compatible browsers, we can use attr selectors, like:
<code>div[data-color=&quot;red&quot;] { color: #f00; }</code>
and then use it:
<code>&lt;div data-color=&quot;red&quot;&gt;My stuff&lt;/div&gt;</code>