Great article that perfectly describes how I'm currently experiencing working as a front-end dev. And it has been like this for possibly forever and it might be getting worse.
I can mention my experience and specialist CSS knowledge on a job application, but it's ignored. Nobody reading it cares about my silly CSS stuff. Making me indeed think about how I could gracefully pivot my career towards working with less potentially obsolete front-end frameworks in the future.

https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/

"CSS isn’t just a complex language, it’s one of the most advanced graphics, layout, and typesetting languages available in computing."

The deskilling of web dev is harming the product but, more importantly, it’s damaging our health – this is why burnout happens

https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/

7 years after I saw this get demoed by @chriscoyier at #CSSDayConf, WebKit now added support to animate SVG path data from within CSS through the `d` property.

```css
svg:hover path {
d: path("M5,2 Q 8,5 5,8");
}
```

Good to see long-lasting bugs eventually get tackled :)

Bug: https://bugs.webkit.org/show_bug.cgi?id=272447

Demo: https://www.bram.us/2017/06/21/changing-svg-path-data-with-css/ (Chrome and Firefox, soon Safari too)

🌟 NEW TIP 🌟

To find what's overriding the CSS property you wish would apply, filter the list CSS rules, or the list of computed styles.

Find out how: https://devtoolstips.org/tips/en/find-why-css-property-is-overridden/

🤩 Excited to see these two CSS additions in the Safari Technology Preview 190 release notes:

1️⃣ “Added support for the safe keyword in flexbox properties.”

See this post by @stefan to know why you need this: https://stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

2️⃣ “Added support for CSS style container queries.”

@Una has got you covered: https://developer.chrome.com/docs/css-ui/style-queries

Never thought I'd have to say this, but please don't put important info, such as *a list of features* in an `::after` pseudo (with '\A• ' ahead of every "list" item).

Yeah, you create a 1 div card. You also annoy people who may want to select the text of one of the 10+ list items without digging into DevTools.

#HTML #CSS #accessibility #a11y #code #coding #frontend #webDev #webDevelopment