CSS
We track 30 posts about CSS from 16 engineering blogs. Most active: Amit Merchant, Stanko Tadić, Philip Walton. Latest post: Oct 6, 2026.
Companies writing about CSS
Recent posts
7 Game-Changing Web UI Features You Can Start Using Today (opens on the source site)
I was watching this video from the Google IO on all the new web UI features that are coming to the web platform and I was blown away by how many of these features are already available in modern browsers. In this article, I want to highlight 7 of these features that I think are game-changing and that you can start using today (of course, in some of the modern browsers). CSS Text Box CSS Scrollspy Contrast Color The hidey bar using @scroll-state query Gap Decorations The light-dark() function The linear() function CSS Text Box A new property called text-box is coming to the web platforms that…
Improving site performance by shipping more CSS (opens on the source site)
A look at how a design system shipped major changes without breaking the world. The post Improving site performance by shipping more CSS appeared first on The GitHub Blog.
Quiz: HTML and CSS Foundations for Python Developers (opens on the source site)
Test your understanding of HTML and CSS basics for Python developers. Structure a page, link files, and style your site with CSS.
Tailwind CSS v4 Migration: Decouple Vite and PostCSS Pipelines (opens on the source site)
Migrate your web application to Tailwind CSS v4 by decoupling Vite and PostCSS pipelines into native CSS toolchains. Continue reading Tailwind CSS v4 Migration: Decouple Vite and PostCSS Pipelines on SitePoint.
CSS Custom Highlight Api: JavaScript Implementation Notes (opens on the source site)
Learn how to build high-performance syntax highlighting without wrapper DOM elements using the CSS Custom Highlight API JavaScript interfaces and Range objects. Continue reading CSS Custom Highlight Api: JavaScript Implementation Notes on SitePoint.
5 best practices for preventing chaos in Tailwind CSS (opens on the source site)
Tailwind CSS has become a very popular CSS framework, and it can speed up development. But using it without proper caution can add mayhem to your code. Learn best practices to avoid getting swept away!
Moving away from Tailwind, and learning to structure my CSS (opens on the source site)
Hello! 8 years ago, I wrote excitedly about discovering Tailwind. At that time I really had no idea how to structure my CSS code and given the choice between a pile of complete chaos and Tailwind, I was really happy to choose Tailwind. It helped me make a lot of tiny sites! I spent the last week or so migrating a couple of sites away from Tailwind and towards more semantic HTML + vanilla CSS, and it was SO fun and SO interesting, so here are some things I learned! As usual I’m not a full-time frontend developer and so all of my CSS learning has happened in fits and starts over many years. it…
Links to CSS colour palettes (opens on the source site)
A while back I decided to stop using Tailwind for new projects and to just write vanilla CSS instead. But one thing I missed about Tailwind was the colour palette (here as CSS). If I wanted a light blue I could just use blue-100 and if I didn’t like it maybe try blue-200 or blue-50. I’m not very good with colours so it makes a big difference to me to have a reasonable colour palette that somebody who is better at colour than me has thought about. But I’m also a little tired of those Tailwind colours, so I asked on Mastodon today what other colour palettes were out there. And then a friend…
One CSS Property That Makes Numbers Look Instantly Better (opens on the source site)
When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated.
OLX Masterclass Frontend 2026 (opens on the source site)
OLX ·
The always-evolving challenges of OLX create a rich environment for innovation, experimentation, and knowledge sharing. In our 2026 Frontend Masterclass, we have three sessions that will shed light on our current development flow.Join us on March 3rd, 2026, from 6:00 pm to 9:00 pm at our OLX Offices in Poznań!Do you want to join us and know what’s trending in the latest frontend technology? Check the event information and join here!Can’t join it in person? Sign in to this form to receive the online recording of the session!Our AgendaWith a broad schedule, our speakers will deliver a mix of…
SVG Filters are just amazing! (opens on the source site)
So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.
One CSS Trick to Eliminate Scrollbar Layout Shifts (opens on the source site)
When a webpage’s content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content visibility, as the presence or absence of the scrollbar alters the available width for content.
CSS only counter component (opens on the source site)
Before we start, here is a demo of the counter (you can also check it out on CodePen): 12345678910-+ This idea started with a space invaders generator I recently made. If you look at the randomize button, you'll notice the number on the dice changes from five to three when you hover over it. A friend then said, "It would be really cool if you showed a different number every time you hover." That got me thinking, could I make this using CSS only?It's trivial to do in a few lines of JavaScript, which I'll probably do at some point. Before diving deeper, I decided to simplify the problem by…
Creating a scroll-spy with 2 lines of CSS (opens on the source site)
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
CSS-only glitch effect (opens on the source site)
Let me show you how I created a CSS-only image glitch effect. I was working on the robot poet and wanted my robotic bard to glitch - because it felt fitting given the quality of poetry it generates. Here's the final result: The effect involves quite a bit of HTML and CSS but no JavaScript. I did use JavaScript to generate the HTML and CSS, but it is not used in the final version. To be clear, there's nothing wrong with using JavaScript for this kind of thing. I just saw it as a fun challenge to make a pure CSS version. The idea # In the words of Daft Punk: Slice It Move It Hue-Rotate It We'll…
Transparent borders for element states (opens on the source site)
It’s quite a common design requirement to have a border on some states of an element but not others. For example a set of tabs where the currently active tab is highlighted with a top border, or a button where a border is added on hover. The problem is that if you add a border to an element, that changes its size, so if you add a border on one state of a component, then the size will change when the state changes, as you can see from these examples: One simple and elegant solution is to use a transparent border on the other versions of that element, and only change the border colour when the…
CSS fix to prevent orphan icons dropping to a new line (opens on the source site)
When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior and works well in many cases. However, for short text, it doesn't look great when the last word or icon drops to the next line, becoming an orphan. For example, you might see something like this: Click here for more info It doesn't look great when the icon is left alone on its own row. Luckily, there's a simple CSS solution. Solution # Only thing we need to add is a single line of CSS: text-wrap: balance; This property tells the browser to wrap the text in a way that best…
Spring Cleaning for z-indexes (opens on the source site)
Managing z-index is a classic challenge for front-end developers. As a project grows, display conflicts and bugs related to z-index can quickly turn into serious headaches.I recently took some time to clean up the z-indexes in one of our projects.In this article, I’ll share the approach I used for this cleanup (while also laying the foundation for keeping things manageable in the long run).1. Analyzing the existing z-indexesThe first step was to perform a thorough audit of all the z-index declarations in the project. This gave me an overview of how many z-indexes we had and what values were…
Building Custom Email Templates with HTML and CSS in Python (opens on the source site)
An HTML email utilizes HTML code for presentation. Its design is heavy and looks like a modern web page, rich with visual elements like images, videos, etc., to emphasize different parts of an email's content. Building email templates tailored to your brand is useful for various email marketing purposes such
Four new CSS features for smooth entry and exit animations (opens on the source site)
These four new features include: animating display and content-visibility on a keyframe timeline, the transition-behavior property, the @starting-style rule, and the overlay property.
Using CSS animations instead of JavaScript timers (opens on the source site)
What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart and animationend events and an ability to pause them. On top of that, we get the animation loop for free, which we would have to implement manually in JavaScript. Implementation # To make the timer, we'll need four CSS classesPlease note that we could…
Create a Bezier Curve Clipping Path (opens on the source site)
Maybe use just a CSS clip-path If you have a simple shape -- like a rectangle or circle -- you can use a simple CSS clip-path attribute. It's fast and easy. But what if you want to create something more complicated like a custom shape, with a bezier curve? clip-path by itself does not handle curves, just fixed points. Curves in SVG Clip Paths SVG to the rescue! SVG has a clipPath element that will help us out. The clipPath element will contain the shapes or paths that you write in SVG crypto codes (not explained here) that create the clipping path shape of your choice. For instance, we could…
Load Both CSS and CSS Modules With Webpack (opens on the source site)
CSS Modules are das bombe, but you're still stuck in a land where the traditional CSS stylesheet exists, you may have to load both. Here's a pattern that could potentially work for you. Importing CSS Webpack is a tool for loading many different kinds of assets as modules into JavaScript. This means, for instance, that you can import CSS into your JavaScript. If you import a CSS module in this way, it'll allow you to use that module on a UI component that is built using JavaScript (eg, React): import css from './my-component.css' import React from 'react' const MyComponent = _ => <div…
The Dark Side of Polyfilling CSS (opens on the source site)
Earlier this year I wrote an article for Smashing Magazine about Houdini, and I called it the “most exciting development in CSS you’ve never heard of”. In the article I argue that Houdini APIs will (among other things) make it possible to polyfill CSS features in a way that simply cannot be done today. While the article was generally quite well-received, I did notice the same question popping up over and over again in my inbox and on Twitter. The basic gist of the question was: What’s so hard about polyfilling CSS? I’ve used lots of CSS polyfills, and they worked fine for me. And I…
Houdini: Maybe the Most Exciting Development in CSS You've Never Heard Of (opens on the source site)
March 24, 2016 (translations: 中文 ) Earlier this year I had the privileged of attending the CSS Houdini Task Force face-to-face meeting in Sydney, Australia. While there I got to meet many of the Houdini members (most of whom work on browser rendering engines), and I got to see a bit of how the standards process works. I firmly believe that what’s happening with Houdini represents the biggest and most important shift in how styling and laying is done on the web since the invention of CSS itself. That being said, it’s still something most developers aren’t aware of, and I wanted that to change.…
Why I'm Excited About Native CSS Variables (opens on the source site)
A few weeks ago CSS variables—more accurately known as CSS Custom Properties—shipped in Chrome Canary behind the Experimental Web Platform Features flag.[1] When Chrome engineer Addy Osmani first tweeted about the release, he was met with a surprising amount of negativity, hostility, and skepticism. At least, it was surprising to me, given how excited I am about this feature. After a quick scan of the responses, it was clear that 99% of the complaints focused on these two things: The syntax is “ugly” and “verbose”. Sass already has variables, so why should I care? While I admit I do get the…
Do We Actually Need Specificity In CSS? (opens on the source site)
Okay, before I start, I want to get one thing out of the way upfront. This article is not a rant about how much I hate specificity. If you want to read an article like that, I’m sure you can find dozens elsewhere online. What I want to do is pose an actual, honest question to the web development community and hopefully get people thinking. To restate the question in a way that gets more at the heart of the issue: If we lived in a world where specificity was never added to the cascade, would things be better or worse? Now, I’m sure some people are thinking: Who cares? Specificity exists, and…
Most Seamless Iframe (opens on the source site)
With few exceptions, it seems that when a developer puts a iframe on his page, he wants it to be seamless on his page. In other words, he doesn't want the viewer to know that it's actually an iframe. To that end, there are a couple of things you can do to make the iframe virtually invisible. The main reason this is such a pain is the main reason for most of the pains in web developer: browsers don't treat things the same way. And specifically, you guessed it, Internet Explorer is very inconsistent compared to the other players. We could do many comparisons on what attributes are needed in…
CMYK colors in CSS: Useful or useless? (opens on the source site)
As someone who dealed a bit with print design in the past, I consider CMYK colors the easiest color system for humen to understand and manipulate. It’s very similar to what we used as children, when mixing watercolors for our drawings. It makes perfect sense, more than HSL and definately more than RGB. I understand that most of us are so accustomed to using RGB that can’t realise that, but try to think for a moment: Which color system would make more sense to you if you had no idea and no experience at all with any of them? Personally, even though I have lots more experience with RGB, given…
Check whether a CSS property is supported (opens on the source site)
Sometimes when using JavaScript, you need to determine whether a certain CSS property is supported by the current browser or not. For instance when setting opacity for an element, you need to find out whether the property that the browser supports is opacity, -moz-opacity (MozOpacity), -khtml-opacity (KhtmlOpacity) or the IE proprietary filter. Instead of performing a forwards incompatible browser detect, you can easily check which property is supported with a simple conditional. The only thing you’ll need is a DOM element that exists for sure. A DOM element that exists in every page and is…
Related topics
This page is generated automatically from the engineering blogs we follow. Every post links to its source, where it was published. See all sources.