Advanced CSS features in modern browsers

CSS Has Leveled Up! Here's why: 🚀 CSS keeps evolving, replacing old, repetitive methods with smarter alternatives. Let’s break down a few improvements: 🔹 Grouping Selectors: Instead of writing main h1, main h2, main h3, the :where() selector lets you group elements more efficiently, reducing repetition. 🔹 Better Viewport Units: vw and vh measure based on the full viewport, but they don’t account for dynamic UI elements (like mobile address bars). lvw (Large Viewport Width) and lvh (Large Viewport Height) adapt better, avoiding unwanted jumps when UI elements appear/disappear. 🔹 Smarter Text Wrapping: Instead of text-wrap: wrap, which simply breaks text at the next line, text-wrap: balance evenly distributes words to create a more visually balanced paragraph. 🔹 Simplified Transforms: Instead of transform: rotate(45deg), you can now directly use rotate: 45deg, which is more readable and works the same way. 🔹 More Intuitive Centering: Instead of using margin-inline: auto for centering flex/grid items, justify-content: center makes alignment clearer and works across different layouts. CSS is becoming cleaner, smarter, and more adaptive—time to ditch the old ways! 🚀

You’ve optimized your React app, split your bundles, and minimized your CSS… but it still lags? Here’s one trick you probably haven’t used: CSS contain — the unsung hero of layout and paint performance. I stumbled upon this gem while debugging a performance issue on a list of expandable cards. Turns out, each toggle was causing a layout reflow across the entire page. The fix? One line: .contained-card { contain: layout paint; } Boom. Now the browser knows: “Changes here don’t affect the rest of the layout.” Why contain is magical: Isolates layout, style, and paint calculations. Reduces scope of expensive reflows. Makes complex UIs (like dashboards or lists) much more performant. Types of containment: layout → Prevents layout recalculations outside the element. style → Isolates style inheritance. paint → Confines paint operations. size → Prevents size from affecting outside elements. Bonus: Pair contain with will-change for buttery-smooth UI transitions. We talk a lot about code splitting and lazy loading, but rendering scope control is equally powerful—and criminally underused. Want your app to feel faster? Give the browser boundaries. #frontendperformance #csscontain #webdev #react #renderingpipeline #css #cleanui #lighthouse

New CSS Units: svh, lvh, and dvh For a long time, using 100vh seemed like the perfect solution for responsive layouts. But on mobile devices, things turned out to be more complicated: dynamic browser address bars would shrink the viewport, causing layouts to jump unexpectedly. To fix this, CSS introduced three new units: svh measures the viewport height immediately after the page loads. lvh represents the maximum available viewport height, for example, after the address bar collapses. dvh reflects the real-time dynamic viewport height as the user interacts with the page. With these updates, responsive layouts are more stable, content no longer shifts unexpectedly on mobile, and the user experience is significantly improved. If you want your websites to feel polished and professional across all devices, it is time to start using these new units. #CSS #Frontend #WebDevelopment #ResponsiveDesign

"Recreate Cover Flow with Modern CSS!" ✨ Remember Apple's slick Cover Flow UI? Good news for frontend devs – we can now build it purely with HTML & CSS! https://lnkd.in/gfZyTwEh This quick write-up explores how CSS Scroll Snap and the powerful new Scroll-Driven Animations API (view() timelines) enable smooth, performant, GPU-accelerated Cover Flow effects without heavy JavaScript. Learn: 🔹 The history & evolution from Flash/JS to pure CSS 🔹 Alternative implementations including my recent WebGL/Three.js version: https://lnkd.in/gD5wfxcR 🔹 A breakdown of the modern technique (inspired by Bramus Van Damme's excellent demo, he deserves a lot of credit here): https://lnkd.in/gceczNR4 🔹 Key CSS: scroll-snap-type, view-timeline, @keyframes for transforms & z-index 🔹 Performance benefits & accessibility tips Learn how modern CSS is revolutionizing interactive UIs! For more on the APIs check out: Scroll-Driven Animations API: https://lnkd.in/gNNGWJZf & CSS Scroll Snap: https://lnkd.in/gt8wc79S #softwareengineering #programming #css

Viewport units just got smarter.  Are you using them right? For years, `vh` and `vw` were our go-to viewport units. But mobile browsers’ dynamic toolbars made `100vh` unreliable, causing layout shifts. Now, CSS gives us better control with new viewport units. - svh / svw → Small Viewport (when toolbars are fully visible) - lvh / lvw → Large Viewport (when toolbars are fully collapsed) - dvh / dvw → Dynamic Viewport (adjusts in real time as the UI changes) With these units, layouts can adapt fluidly without sudden jumps when the browser UI changes. Need a full-height section? Use 100dvh, and it’ll always fit. Want a consistent design even when toolbars disappear? lvh has you covered. The browser support is already solid at ~95%, so it’s pretty safe to use. Do you already use them, or do you sill use old viewport units? **** To learn more tips about CSS, make sure to join my newsletter https://lnkd.in/eemgxQ7M ❤️

CSS is developing faster than most of us can keep up. One feature I recently discovered: the env() CSS function. Yes, there are environment variables in CSS, similar to what you'd use in NodeJS. The syntax: env(<environment-variable>, <fallback>) The most practical use case: safe-area-inset variables (safe-area-inset-top, -right, -bottom, and -left). These variables ensure your web content isn't obscured by device-specific UI elements like: • Display notches (iPhone) • Rounded corners • System navigation bars Example in CSS: padding-top: env(safe-area-inset-top, 20px); Or with Tailwind: pt-[env(safe-area-inset-top,20px)] In regular web browsers, these variables typically equal zero, which is why the fallback value is important. This is especially useful for PWA (Progressive Web Apps) or mobile-first designs where you need to take into account various device shapes and system UI elements. Image by Roderick E.J.H. Gadellaa.