@modern-css.com@rss-parrot.net
I'm an automated parrot! I relay a website's RSS feed to the Fediverse. Every time a new post appears in the feed, I toot about it. Follow me to get all new posts in your Mastodon timeline! Brought to you by the RSS Parrot.
---
Modern CSS techniques. Old CSS hacks replaced with clean, native code.
Site URL: modern-css.com/
Feed URL: modern-css.com/feed
Posts: 59
Followers: 1
Motion path animation without JavaScript
https://modern-css.com/motion-path-animation-without-javascript/
Published: March 4, 2026 03:43
Animate elements along a curved path with pure CSS. Replaces GSAP motionPath or manual JS coordinate calculations with offset-path and offset-distance.
Customizable selects without a JavaScript library
https://modern-css.com/customizable-selects-without-a-javascript-library/
Published: March 4, 2026 03:43
Fully style HTML select dropdowns with appearance: base-select instead of Select2 or Choices.js. Old vs modern CSS side by side.
CSS feature detection without JavaScript
https://modern-css.com/css-feature-detection-without-javascript/
Published: March 2, 2026 23:46
Detect CSS feature support directly in CSS with @supports instead of JavaScript checks or Modernizr. Apply styles only when a property is supported.
Filling available space without calc workarounds
https://modern-css.com/filling-available-space-without-calc-workarounds/
Published: March 2, 2026 23:46
Make elements fill their container with the stretch keyword instead of calc(100% - margins) or width: 100% overflow issues.
Vertical text centering without padding hacks
https://modern-css.com/vertical-text-centering-without-padding-hacks/
Published: March 2, 2026 23:46
Visually center text with text-box: trim-both cap alphabetic. No more uneven padding or line-height tricks.
Form validation styles without JavaScript
https://modern-css.com/form-validation-styles-without-javascript/
Published: March 2, 2026 23:46
Show validation feedback only after user interaction with :user-invalid. No JavaScript .touched class or blur event listeners.
Vivid colors beyond sRGB
https://modern-css.com/vivid-colors-beyond-srgb/
Published: March 2, 2026 23:46
Use oklch or display-p3 so colors pop on wide-gamut displays instead of staying in the sRGB box.
Balanced headlines without manual line breaks
https://modern-css.com/balanced-headlines-without-manual-line-breaks/
Published: March 2, 2026 23:46
Balance headline line breaks with text-wrap: balance. No manual br tags or Balance-Text JS. Side-by-side old vs modern CSS.
Multiple font weights without multiple files
https://modern-css.com/multiple-font-weights-without-multiple-files/
Published: March 2, 2026 23:46
Load one variable font file and use any weight from 100 to 900 instead of separate files for each weight.
Low-specificity resets without complicated selectors
https://modern-css.com/low-specificity-resets-without-complicated-selectors/
Published: March 2, 2026 23:46
Use :where() so reset and base styles have zero specificity and never override component styles.
Page transitions without a framework
https://modern-css.com/page-transitions-without-a-framework/
Published: March 2, 2026 23:46
Smooth page-to-page transitions with document.startViewTransition() and view-transition-name. No Barba.js or React Transition Group.
Aligning nested grids without duplicating tracks
https://modern-css.com/aligning-nested-grids-without-duplicating-tracks/
Published: March 2, 2026 23:46
Use grid-template-columns: subgrid so inner grids inherit the parent's columns without repeating track definitions.
Scroll snapping without a carousel library
https://modern-css.com/scroll-snapping-without-a-carousel-library/
Published: March 2, 2026 23:46
Build horizontal scroll snap carousels with scroll-snap-type and scroll-snap-align. No Slick, Swiper, or touch handlers.
Sticky headers without JavaScript scroll listeners
https://modern-css.com/sticky-headers-without-javascript-scroll-listeners/
Published: March 2, 2026 23:46
Keep headers fixed on scroll with one CSS property. No scroll listeners, getBoundingClientRect, or class toggles.
Path shapes without SVG clip paths
https://modern-css.com/path-shapes-without-svg-clip-paths/
Published: March 2, 2026 23:46
Create responsive clip-path shapes with CSS shape() instead of SVG clipPath elements or px-based path() values that break on resize.
Entry animations without JavaScript timing
https://modern-css.com/entry-animations-without-javascript-timing/
Published: March 2, 2026 23:46
Animate elements when they appear using @starting-style. No requestAnimationFrame or setTimeout to add a class after paint.
Scroll-linked animations without a library
https://modern-css.com/scroll-linked-animations-without-a-library/
Published: March 2, 2026 23:46
Create scroll-linked animations with pure CSS. Side-by-side comparison of IntersectionObserver JS approach vs modern animation-timeline and scroll-driven animations.
Scrollbar styling without -webkit- pseudo-elements
https://modern-css.com/scrollbar-styling-without-webkit-pseudo-elements/
Published: March 2, 2026 23:46
Style scrollbars with standard CSS instead of non-standard ::-webkit-scrollbar pseudo-elements that only work in Chrome and Safari.
Responsive clip paths without SVG
https://modern-css.com/responsive-clip-paths-without-svg/
Published: March 2, 2026 23:46
Create responsive clip paths with the CSS shape() function instead of SVG path() definitions that don't scale. Old vs modern CSS side by side.
Sticky & snapped element styling without JavaScript
https://modern-css.com/sticky-snapped-styling-without-javascript/
Published: March 2, 2026 23:46
Style elements based on their stuck or snapped scroll state using CSS scroll-state() container queries instead of JavaScript scroll event listeners.
Staggered animations without nth-child hacks
https://modern-css.com/staggered-animations-without-nth-child-hacks/
Published: March 2, 2026 23:46
Create staggered animation delays with sibling-index() instead of hardcoding --index on every nth-child. Modern CSS tree counting functions.
Scroll spy without IntersectionObserver
https://modern-css.com/scroll-spy-without-intersection-observer/
Published: March 2, 2026 23:46
Highlight the current navigation link based on scroll position using CSS scroll-target-group and :target-current instead of JavaScript IntersectionObserver.
Preventing layout shift from scrollbar appearance
https://modern-css.com/preventing-layout-shift-from-scrollbar/
Published: March 2, 2026 23:46
Reserve space for the scrollbar before it appears with scrollbar-gutter: stable. No overflow-y: scroll hack or hardcoded padding.
Scoped styles without BEM naming
https://modern-css.com/scoped-styles-without-bem-naming/
Published: March 2, 2026 23:46
Scope styles to a component with @scope (.card) { }. No BEM, CSS Modules, or styled-components. Native CSS scoping.
Responsive images without the background-image hack
https://modern-css.com/responsive-images-without-background-image-hack/
Published: March 2, 2026 23:46
Use object-fit: cover on img elements instead of background-image hacks. Semantic HTML, native lazy loading, no layout workarounds.
Custom easing curves without cubic-bezier guessing
https://modern-css.com/custom-easing-without-cubic-bezier-guessing/
Published: March 2, 2026 23:46
Define precise custom easing curves with linear() instead of approximating them with cubic-bezier. Supports bounce, spring, and elastic effects natively.
Range style queries without multiple blocks
https://modern-css.com/range-style-queries-without-multiple-blocks/
Published: March 2, 2026 23:46
Use range comparisons in CSS style queries instead of multiple @container style() blocks. Old vs modern CSS side by side.
Reduced motion without JavaScript detection
https://modern-css.com/reduced-motion-without-javascript-detection/
Published: March 2, 2026 23:46
Respect the user's reduced motion preference in CSS without JavaScript. Disable or slow animations for users who have enabled reduced motion in their OS.
Media query ranges without min-width and max-width
https://modern-css.com/media-query-ranges-without-min-max-syntax/
Published: March 2, 2026 23:46
Write media query ranges with comparison operators instead of min-width and max-width. Shorter, more readable, and supports compound ranges in one query.
Color variants without Sass functions
https://modern-css.com/color-variants-without-sass-functions/
Published: March 2, 2026 23:46
Derive lighter, darker, or more saturated colors at runtime with CSS relative color syntax instead of Sass lighten() or darken().
Perceptually uniform colors with oklch
https://modern-css.com/perceptually-uniform-colors-with-oklch/
Published: March 2, 2026 23:46
Define colors in oklch for predictable lightness across hues. Consistent brightness without manual tweaking. Build palettes by changing one value.
Preventing scroll chaining without JavaScript
https://modern-css.com/preventing-scroll-chaining-without-javascript/
Published: March 2, 2026 23:46
Stop scroll from leaking out of modals and dropdowns with overscroll-behavior: contain. No JavaScript preventDefault needed.
Dropdown menus without JavaScript toggles
https://modern-css.com/dropdown-menus-without-javascript-toggles/
Published: March 2, 2026 23:46
Use the popover API so dropdowns open and close without click handlers, click-outside, or ESC key JavaScript.
Multiline text truncation without JavaScript
https://modern-css.com/multiline-text-truncation-without-javascript/
Published: March 2, 2026 23:46
Limit text to a few lines with an ellipsis using line-clamp instead of character counting or the old -webkit-box-orient hack.
Direction-aware layouts without left and right
https://modern-css.com/direction-aware-layouts-without-left-and-right/
Published: March 2, 2026 23:46
Use margin-inline-start, padding-block-end and other logical properties so layouts adapt to RTL without duplicating rules.
Hover tooltips without JavaScript events
https://modern-css.com/hover-tooltips-without-javascript-events/
Published: March 2, 2026 23:46
Show tooltips on hover and focus with popover=hint and the interestfor attribute. No mouseenter/mouseleave JS events needed.
Grouping selectors without repetition
https://modern-css.com/grouping-selectors-without-repetition/
Published: March 2, 2026 23:46
Use :is() to group selectors and avoid repeating the same prefix. Shorter and easier to maintain.
Selecting parent elements without JavaScript
https://modern-css.com/selecting-parent-elements-without-javascript/
Published: March 2, 2026 23:46
Select parent elements based on their children using pure CSS. Side-by-side comparison of the old JavaScript approach vs the modern :has() pseudo-class.
Drop caps without float hacks
https://modern-css.com/drop-caps-without-float-hacks/
Published: March 2, 2026 23:46
Use initial-letter for drop caps instead of float, big font-size, and fragile line-height and margin tweaks.
Smooth height auto animations without JavaScript
https://modern-css.com/smooth-height-auto-animations-without-javascript/
Published: March 2, 2026 23:46
Animate height to and from auto with CSS. No JavaScript measuring scrollHeight or fixed pixel transitions.
Positioning shorthand without four properties
https://modern-css.com/positioning-shorthand-without-four-properties/
Published: March 2, 2026 23:46
Use the inset shorthand instead of writing top, right, bottom, and left as four separate declarations.
Independent transforms without the shorthand
https://modern-css.com/independent-transforms-without-the-shorthand/
Published: March 2, 2026 23:46
Animate translate, rotate, and scale independently with individual properties. No more rewriting the whole transform to change one value.
Dark mode colors without duplicating values
https://modern-css.com/dark-mode-colors-without-duplicating-values/
Published: March 2, 2026 23:46
Use the light-dark() function so one property gets light and dark values without duplicating variables in a media query.
Modal controls without onclick handlers
https://modern-css.com/modal-controls-without-onclick-handlers/
Published: March 2, 2026 23:46
Open and close dialogs and popovers with commandfor and command attributes. No onclick handlers or JavaScript needed.
Text highlighting without DOM manipulation
https://modern-css.com/text-highlighting-without-dom-manipulation/
Published: March 2, 2026 23:46
Highlight arbitrary text ranges with the CSS Custom Highlight API instead of wrapping spans in innerHTML or breaking the DOM with surroundContents().
Theme variables without a preprocessor
https://modern-css.com/theme-variables-without-a-preprocessor/
Published: March 2, 2026 23:46
Use CSS custom properties for colors and spacing. They update at runtime, no Sass or LESS needed.
Native autocomplete without JavaScript
https://modern-css.com/native-autocomplete-without-javascript/
Published: March 1, 2026 21:24
Add autocomplete suggestions to any text input with datalist. No JS library, no custom dropdown code.
Lazy load images without JavaScript
https://modern-css.com/lazy-load-images-without-javascript/
Published: March 1, 2026 20:34
Defer off-screen images and iframes with loading=lazy. No IntersectionObserver, no scroll listener.
Live form output without DOM writes
https://modern-css.com/live-form-output-without-javascript-dom-writes/
Published: March 1, 2026 20:34
Display live form values with the output element. No querySelector, no textContent writes on every input event.
Better mobile keyboards without JavaScript
https://modern-css.com/mobile-keyboard-hints-without-javascript/
Published: March 1, 2026 20:34
Show the right mobile keyboard for any input with inputmode. Relabel the return key with enterkeyhint. Two attributes, no JS.
Accordion disclosure without JavaScript
https://modern-css.com/accordion-without-javascript/
Published: March 1, 2026 20:34
Build expand/collapse accordions with details and summary. No JS click handlers, no aria toggling by hand.
Auto-growing textarea without JavaScript
https://modern-css.com/auto-growing-textarea-without-javascript/
Published: February 26, 2026 00:25
Make textarea and input elements grow with their content in CSS. No JavaScript oninput resize handlers.
Focus styles without annoying mouse users
https://modern-css.com/focus-styles-without-annoying-mouse-users/
Published: February 26, 2026 00:25
Show focus outline only for keyboard users with :focus-visible. Mouse users get no outline.
Fluid typography without media queries
https://modern-css.com/fluid-typography-without-media-queries/
Published: February 26, 2026 00:25
Smooth font scaling from small to large viewports with clamp(). No breakpoint ladder.
Font loading without invisible text
https://modern-css.com/font-loading-without-invisible-text/
Published: February 25, 2026 21:19
Use font-display: swap in @font-face so fallback text shows immediately instead of invisible text while fonts load.
Naming grid areas without line numbers
https://modern-css.com/naming-grid-areas-without-line-numbers/
Published: February 25, 2026 21:19
Define layout with named areas like grid-template-areas instead of grid-column/row line numbers or float-based layouts.
Spacing elements without margin hacks
https://modern-css.com/spacing-elements-without-margin-hacks/
Published: February 25, 2026 21:19
Space flex or grid children with gap. No negative margins or :last-child overrides.
Scaling elements without transform hacks
https://modern-css.com/scaling-elements-without-transform-hacks/
Published: February 25, 2026 21:19
Scale elements with the CSS zoom property instead of transform: scale() and negative margin hacks. zoom shrinks the element and its layout space together.
Nesting selectors without Sass or Less
https://modern-css.com/nesting-selectors-without-sass-or-less/
Published: February 25, 2026 21:19
Write nested CSS selectors without Sass, Less, or any build tool. Side-by-side comparison of Sass nesting vs native CSS nesting with the & selector.