explore | Grilled Cheese

As of late, I’ve developed a new habit while writing #CSS: I now ask myself if I need to apply prefers-reduced-motion.

🌊 Time to relearn proper CSS

#Development #Approaches
Container style queries and advanced attr() · What if components styled themselves in CSS? ilo.im/16fz65 by Brecht De Ruyte

_____
#HTML #CSS #Components #AttrFunction #ContainerQueries #CustomProperties #WebDev #Frontend

✨ Schluss mit harten Seitenwechseln!

@derlehmann.bsky.social zeigt auf der #bastacon:
🎨 View Transitions mit CSS
⚡ für SPA & Multi-Page
🛠️ ohne zusätzliche Libraries

📅 Mittwoch, 30.09.2026 | 09:00 - 10:00 Uhr | 📍 Mainz

🔗 https://tinyurl.com/3vxmfn76

#CSS #WebDevelopment #Frontend #UX #bastacon

New in Chrome 153
- #CSS Single-axis scroll containers
- #HTML <camera> and <microphone> elements
- #JS Joint Iteration

word-break の auto-phrase が効かないのは lang 属性のせいだった。日本語の折り返し5通りを343px幅で実測してみた

#JavaScript #HTML #CSS #Chrome #フロントエンド

A cartoon from April 2025: Unattended children...
comicss.art/comics/181/

Illustration made with CSS.
Source code: comicss.art/comics/181/u...

#css #cartoon #joke

【Tips】
CSSの:has()を使うときのつまずきポイント、チェックしておきましょう👇

❌ :has()の中に:has()はネストできない
❌ ::beforeや::first-lineなどの擬似要素は引数に書けない

どちらもやってしまうと、セレクター全体が無効になるので注意です。

#codegrid #css

🏆 September 8th CSS-Dodos Top 3

1 jdsteinbach - 2/6, clean
2 cheddy - 4/6, clean
3 Flex Shuffler 589 - X/6

css-questions.com/css-dodos

#css #cssdodos #cssquestions

Nice insight on the explicit last‑item case. Have you tried swapping it for `:last-child`/`:nth-last-child(1)` with a utility class? Keeps the markup pure and survives list reordering. #CSS

Four years of computer science theory just to get defeated by proprietary rendering engines.

🔔 Hit follow for more tech memes!

#css #frontend #webdev #programmerhumor #devlife

#Development #Techniques
Balancing heading styles using maths · Accessible headings using a modular scale ilo.im/16fyur by Craig Abbott

_____
#Headings #Scales #Fonts #Accessibility #Browsers #WebDev #Frontend #HTML #CSS #CssCalc

MicroLighter: A 2KB Syntax Highlighter That Doesn't Touch the DOM — A small, client-side syntax highlighter that makes use of the #CSS Custom Highlights API || #WebDev #JavaScript #WebComponents bit.ly/3TeV0fC

CSS dispose à présent de nombreuses pseudo-classes pour adapter le style d'un élément en fonction de son état.

🔗 https://css-tricks.com/css-states-and-javascript-events/

#CSS

Managing large CSS files is often difficult.
The SMACSS methodology helps you solve this problem.
It divides your styles into five clear categories.

#CSS #WebDev #FrontEnd

1/5

#CSS Link parameters for SVG by @ollie-williams.bsky.social