Theo Soti

@cardoso_dmg Haha I know right? Just be careful about browser support. It's better to add a classic border as a fallback.

I've been looking to reproduce this corner-shape: squircle for sooooo long. thanks @theoleff

ch matches the width of the “0” character. lh equals the element’s line-height. cap matches the height of capital letters. ex follows the height of the lowercase “x”. cqi scales with a container’s inline size. vmin and vmax follow the smallest or largest viewport side.

@r0ktech Github, but I like gitlab too

where do you store your code? 1. Github ? 2. Gitlab ? 3. Bitbucket ?

@csaba_kissi You don't need JavaScript. theosoti.com/you-dont-need-…

💥 Pitch your startup/side project: - Max 6 words - Add your link 22K views last week.

@AmanSharma_554 I strongly advise to learn *modern* HTML and CSS. You will have a lot less accessibility issues to handle.

Animated text gradients with pure CSS. background-clip:text + color:transparent, then animate background-position. Use background-size, and repeat the first color in the gradient (c1 c2 c1) to avoid a visible “jump” on loop. Chromium + WebKit are solid; Firefox is catching up.

Stop rounding corners. Start shaping them. border-radius sets the size. corner-shape sets the geometry (bevel, scoop, squircle...). Same radius, totally different vibe. Works today in Chromium. No Safari/Firefox yet, so ship it as progressive enhancement.

Stop hardcoding input heights or widths. field-sizing: content; lets inputs, selects, and textareas size to their content (even placeholders). Cleaner forms, zero JS. Support is growing (about 74%): Chrome/Edge + Safari 26.2+. No Firefox yet. Would you use it?

Mirror reflection in pure CSS with ONE property: -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0,0,0,.5)); No pseudo-elements. No duplicate images. Works in Safari + Chrome + Edge but not Firefox. Would you ship it as progressive enhancement?

CSS fix: tabular numbers (all digits same width) font-variant-numeric: tabular-nums; Result: cleaner tables, prices, dashboards. Subtle polish users feel immediately. Have you used tabular-nums before?

Ever noticed how numbers often look misaligned? It’s not your layout. It’s the font. Most fonts default to proportional digits. So “1111” is much narrower than “8888”. Columns won’t line up perfectly.

It won’t work everywhere yet, but it fails gracefully: unsupported browsers just show a static bar. Would you use this on articles?

The magic line: animation-timeline: scroll(); Top of the page = 0% Bottom = 100% So the bar is a real scroll indicator—without JS.

Still using JavaScript for a reading progress bar? You can build it with pure CSS.

Plus: • real backdrop with ::backdrop (no wrappers) • modern CSS theming • smooth entry with @starting-style • discrete transitions with transition-behavior: allow-discrete Do you used it in production?

Accessibility is built in: • focus trap • Esc closes • keyboard nav works out of the box

The native <dialog> element is stronger than you think. And most people still ignore it.

Support is strong in modern Chrome/Edge/Opera + Safari 26+. Firefox is landing (147+; not in stable 146 yet). Progressive enhancement with @supports (anchor-name: --a). What would you build?

Edge cases? Let the browser handle it: position-try: flip-inline flip-block; Tooltips/dropdowns stay glued even near the viewport edge.

Positioning UI elements just got easier. Meet CSS Anchor Positioning.