https://cssradar.com/blog/ Practical articles about modern CSS, native HTML, and the custom code you may no longer need. en Wed, 16 Sep 2026 12:00:00 -1000 https://cssradar.com/blog/css-radar-animation.html https://cssradar.com/blog/css-radar-animation.html Wed, 16 Sep 2026 12:00:00 -1000 hey@theosoti.com (Theo Soti) Build an animated radar in pure CSS with rings, a conic-gradient sweep, one rotate animation, labels placed with sin() and cos(), and reduced-motion support. https://cssradar.com/blog/css-starting-style-transitions.html https://cssradar.com/blog/css-starting-style-transitions.html Wed, 09 Sep 2026 12:00:00 -1000 hey@theosoti.com (Theo Soti) Animate dialogs, popovers, display: none, and newly inserted elements with @starting-style and discrete CSS transitions. https://cssradar.com/blog/html-inert-attribute.html https://cssradar.com/blog/html-inert-attribute.html Wed, 09 Sep 2026 11:00:00 -1000 hey@theosoti.com (Theo Soti) Make a whole DOM subtree unavailable without managing every link, button, and tabindex separately. https://cssradar.com/blog/css-light-dark-function.html https://cssradar.com/blog/css-light-dark-function.html Wed, 09 Sep 2026 10:00:00 -1000 hey@theosoti.com (Theo Soti) Keep light and dark color values together with light-dark(), color-scheme, local previews, and practical fallbacks. https://cssradar.com/blog/css-scroll-driven-animations.html https://cssradar.com/blog/css-scroll-driven-animations.html Tue, 01 Sep 2026 12:00:00 -1000 hey@theosoti.com (Theo Soti) Build scroll progress bars and entry animations with animation-timeline, view timelines, practical fallbacks, and reduced-motion support. https://cssradar.com/blog/html-details-summary-accordion.html https://cssradar.com/blog/html-details-summary-accordion.html Tue, 01 Sep 2026 11:00:00 -1000 hey@theosoti.com (Theo Soti) Build an accessible accordion with native details and summary, including exclusive groups, styling, caveats, and cases that still need another pattern. https://cssradar.com/blog/css-auto-growing-textarea-field-sizing.html https://cssradar.com/blog/css-auto-growing-textarea-field-sizing.html Tue, 01 Sep 2026 10:00:00 -1000 hey@theosoti.com (Theo Soti) Make a textarea grow with its content using CSS field-sizing, with sensible size limits, fallbacks, and the edge cases worth testing. https://cssradar.com/blog/css-scroll-snap-scroll-behavior.html https://cssradar.com/blog/css-scroll-snap-scroll-behavior.html Thu, 20 Aug 2026 12:00:00 +0200 hey@theosoti.com (Theo Soti) Build CSS scroll snap carousels and smooth anchor navigation with useful offsets, reduced-motion fallbacks, and honest performance expectations. https://cssradar.com/blog/custom-javascript-to-native-css.html https://cssradar.com/blog/custom-javascript-to-native-css.html Thu, 20 Aug 2026 11:00:00 +0200 hey@theosoti.com (Theo Soti) Move browser-owned behavior from custom JavaScript to native CSS and HTML without losing accessibility, fallbacks, or product logic. https://cssradar.com/blog/css-container-queries-examples.html https://cssradar.com/blog/css-container-queries-examples.html Thu, 20 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Build responsive components with named containers, container query units, practical breakpoints, and useful fallbacks. https://cssradar.com/blog/css-anchor-positioning-guide.html https://cssradar.com/blog/css-anchor-positioning-guide.html Thu, 20 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Position menus, tooltips, and floating UI relative to their trigger without measuring coordinates in JavaScript. https://cssradar.com/blog/css-nesting-vs-sass.html https://cssradar.com/blog/css-nesting-vs-sass.html Thu, 20 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Compare native CSS nesting with Sass specificity, ampersand behavior, selector suffixes, and build-time features. https://cssradar.com/blog/popover-api-vs-dialog.html https://cssradar.com/blog/popover-api-vs-dialog.html Mon, 17 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Choose the native overlay that matches the behavior: a non-modal popover or a modal dialog. https://cssradar.com/blog/css-has-selector-examples.html https://cssradar.com/blog/css-has-selector-examples.html Mon, 17 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Six practical :has() patterns for forms, cards, sibling state, and layouts. https://cssradar.com/blog/modern-css-features.html https://cssradar.com/blog/modern-css-features.html Sat, 15 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Eight modern CSS features that replace common workarounds, with practical examples and fallback advice. https://cssradar.com/blog/replace-javascript-with-html-css.html https://cssradar.com/blog/replace-javascript-with-html-css.html Sat, 15 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) Use native HTML and CSS for interface behavior without pretending every script can disappear. https://cssradar.com/blog/css-audit-modernize-website.html https://cssradar.com/blog/css-audit-modernize-website.html Sat, 15 Aug 2026 08:00:00 +0200 hey@theosoti.com (Theo Soti) A repeatable way to find old workarounds, capture evidence, and modernize a website without turning the audit into a rewrite.