A website about the past, present, and future of CSS.
I almost missed this great post by Una Kravets on the upcoming changes to the <select> element where soon we’ll be able to customize it to our heart’s content without the need to hack things together. Una shows how we’ll be able to do that soon with just this little bit of CSS: select, ::picker(select) { appearance : base-select ; } A few visual changes are made by default which is weird and…
Richard Rutter made a cool new CSS reset : The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the…
Michelle Barker wrote this nifty piece about blockquotes but then at the end talks about why it’s so important to learn HTML : Conversely, it’s pretty easy to write bad HTML, because for most developers there are no consequences. If you write some bad Javascript, your application will probably crash and you or your users will get a horrible error message. It’s like a flashing light above your head…
Chase McCoy : You might be aware of a visual effect related to HDR videos if you’ve ever scrolled Instagram on your iPhone—the pixels displaying the HDR content display in full brightness, while the rest of the screen is slightly dimmed. [...] The illustrations for Digital Divinity make use of this effect in a brilliant (literally) way by masking a pure white, HDR video such that parts of the…
Doug Parker made some interesting notes about the unexpected behavior of whitespace : Why exactly does HTML work this way? Why did we make this language so complicated? I think the core problem here is that all whitespace in HTML is ambiguous. Specifically, it is ambiguous with regard to the developer's intent. For any given space, did the developer mean for it to be displayed to the user or did…
I love this post Adam Stoddard on building a color and theming system for his website because it outlines all the hidden and oft-ignored complexities behind great UI engineering. Adam writes : What does an ideal CSS color system look like? My answer to this question has evolved along the way, but here’s what I think, today: Composable, cascading themes - You should be able to set different themes…
How have I never heard of the animation-composition property before? I just spotted it over on Manuel Matuzović’s blog : CSS animations can be composited in three ways: replace, add, and accumulate. The animation-composition property allows you to switch between them. Huh! So you can effectively add, replace, or combine animations together which is something I’ve never thought about before! I had…
This is your daily reminder that Wakamai Fondue is an invaluable resource when dealing with font files. A lot of the time I’ll buy a font and the PDF specimen won’t tell me how to use a feature with CSS! It’s annoying! Thankfully the open beta has a host of improvements when it comes to variable fonts too, so first you upload your font and then tweak the optical size, weight, width, or turn on…
Alex Russell has written a fantastic series of posts on the “JavaScript-industrial-complex” where he explores how the current state of web performance has become unacceptable and how dire the situation has become: We are not getting better UX for the escalating capital and operational costs. Instead, the results are getting worse for folks on the margins. JavaScript-driven frontend complexity…
Here’s a fantastic trick with background-attachment: fixed from Kevin Powell : Huh! Also, doing a quick search for other cool things you can do with this trick, I found that Geoff already made a collection of use cases for fixed backgrounds in CSS years ago that’s worth checking out, too.
The other day I wanted to make a CSS animation where an object would rotate around a circle so this was the first thing I tried: @keyframes circle { 0% { transform : rotate ( 0deg ) ; } 100% { transform : rotate ( 360deg ) ; } } See the Pen Untitled by Robin Rendle ( @robinrendle ) on CodePen . Gah! That’s not the right kind of rotation I wanted. What I really needed was for the whole object to be…
This doesn’t have much to do with CSS, but this new feature by Framer called Fetch caught my eye: The reason why I mention this is because it shows a snapshot of what the future of web design tools might be: they’re not just going to allow you to draw pixels on a canvas, but allow you to build real, interactive software that pings a database. That’s exciting to me! As a designer by day, I want to…
After all these years of using CSS Grid and I still feel like I haven’t grokked everything that it’s capable of. Ahmad Shadeed’s latest interactive tutorial is a great reminder of that where he’s written about named grid areas and explains the following bit of CSS: .layout { grid-template-columns : [full-start] 1fr [content-start] 2fr [content-end] 1fr [full-end] ; } So what Ahmad has done here is…
I’m not sure how I fell of the bandwagon of Manuel Matuzović’s excellent 100 days of CSS... It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while…
I think my favorite line of CSS has finally been usurped! For maybe a decade my favorite line was this bad boy: .element { display : grid ; place-items : center ; } Pure, simple, perfect. Throw some viewport units in on top and you now have Megazord-like super powers to take control of the browser canvas like you never could before. Now though, my favorite line is this: @view-transition {…
Oooooh here’s something I’ve never thought about when it comes to CSS: motion blur ! Adam Argyle wrote this back in 2019 (!) but it still feels new and exciting to me: Professional polish of motion graphics often includes the application of motion blur. In most cases, it's a boolean toggled at the layer level, that then tells the engine to set a blur amount based on the speed of the pixels. This…
This is a great post by Lea Verou all about conditional statements in CSS: A couple days ago, I posted about the recent CSS WG resolution to add an if() function to CSS . Great as it may be, this is still a long way off, two years if everything goes super smoothly, more if not. So what can you do when you need conditionals right now? You may be pleased to find that you’re not completely out of…
Thanks to Andy Bell’s ever-so-good newsletter, The Index , I found myself ooo-ing and aaa-ing at Michelle Barker’s excellent post from back in May about creating a JavaScript-free menu with the latest bells and whistles like anchor-positioning and the Popover API : Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could…
Miriam Suzanne : There’s no rush to rip out all your media queries, and replace them with containers. You’ll be fine waiting for widely available support and your next scheduled re-factor. But if you’re still avoiding grid – whatever your reasons – you are, in fact, missing out. CSS grid is one of the best features in CSS, and one of the biggest time-savers on every site we build. One part of Grid…
CSS Grid has made me lazy. Whenever I start a new project I tend to pick a 12 column grid and move on to other things... .grid { grid-template-columns : repeat ( 12 , 1fr ) ; } ...it’s almost too easy! This is probably also out of laziness in the design, too. I’d often pickup the Bootstrap grid and after years of use I began to see every page built out of 12 columns. So layouts, and the grid…
The folks at Clearleft published their browser support policy the other day which is pretty interesting: Underlying our browser support policy are two foundational principles: Website content and core functionality should be accessible to everyone. It’s okay for websites to look different in different browsers. If content is unreadable in some browsers, that’s a bug that we will fix. If content is…
The other day I spotted these lovely VHS posters and wondered how you might make that slanted background pattern there with just CSS. So I took a crack at it and got pretty close: See the Pen Responsive JVC Video Cassette by Robin Rendle ( @robinrendle ) on CodePen . This isn’t an SVG (which is probably the best way to make something like this) but instead it’s plain ol’ CSS. Try and resize the…
Update: inset-area has been renamed to position-area since this post was published! You can read more about these syntax changes here . I’ve been half-ignoring anchor positioning but patiently waiting for it to land in browsers for a while now. But this explanation by Brecht yesterday reminded me to buckle up and learn it all properly since it just landed in the latest version of Chrome and Edge.…
Since I’ve been working as a designer for a few years now, I’ve felt like I needed to upgrade my command line chops. So I downloaded Warp and fell down a big rabbit hole of futzing and playing with everything I’d missed or ignored over the years. This led me to Charm , a group of folks who make super interesting command line tools. They make stuff like VHS which helps you create GIFs of your…
Dave Rupert : Through stalking the #WebComponents hashtag and my Frontend Masters course , I’m privy to a lot of developers’ first experiences with web components. There’s a wide range of people digging in, but the most common first-time experience I come across is a developer coming from a classical component framework like React with JSX going straight to writing vanilla Web Components, becoming…
Ahmad Shadeed has written another beautifully designed and polished deep-dive but this time all about the gap property. Sometimes it’s nice to go back in time and remember all the negative-margin hacks and complicated layout-related code we had to write just to space things apart. Thankfully no longer! Another thing Ahmad’s post reminded me is that not only is gap straight up easier to use than…
Max Böck on all the new things in CSS : While learning the syntax for any given CSS feature is usually not that hard, re-wiring our brains to think in new ways is significantly harder. We’ll not only have to learn the new way, we’ll also have to unlearn the old way, even though it has become muscle memory at this point. Yes! This is the hardest part of web development for me, as there’s a lot of…
Design Spells is a big collection of animations and fun, interactive details taken from all over the web. Lots of these are stressful and overwhelming to me but there’s some particularly absurd things in here I love like Webflow’s ridiculous 404 page or Vercel’s interactive conference badge . If you’re looking for something to make a Codepen out of, then this is also a fantastic resource to pick…
Cool, punk rock stuff coming in hot off the press from Chase McCoy here: There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations: Animating to and from display: none; for the sake of enter/exit animations. Animating to and from the intrinsic size of an element (such as height: auto; ). Traditionally, animating something into…
This is super cool : ...11ty is making some bigger moves: we’re going all-in to create a fully independent and sustainable, grass-roots funded open source project in 2024. Practically speaking this means that for the very first time in 11ty’s history, I will be working independently on 11ty full time. This means increased iteration speed, more responsive official support, more features and bug…
Eric Bailey : I now pose the question: Why does all this have to be the website or webapp author’s responsibility? Usually I just look at a new thing in CSS like contrast-color() and think: “Cool! A new thing for me to build stuff with!” and I won’t spend much time thinking about the relationship between web developers and browsers. But I think Eric has me convinced here.
A few weeks ago I mentioned Scroll Driven Animations but forgot to link to this excellent tool called View Progress Timeline that visualizes elements animating on scroll and how to trigger them. Once you’ve made a little demo of the animation you want, it then gives you all the CSS you need to copy/paste into your own project. Fantastic stuff.
There’s been some chatter over the last few days about “Baseline” and I’d heard the name in passing before but I must be honest: I was pretty embarrassed to ask around because a lot of blog posts mention this thing as if it’s been kicking around forever. (I think it was announced at Google I/O last year and it managed to slip me by! How embarrassing!) Let’s set the stage then: a “Baseline” feature…
I had never heard of this exciting contrast-color function before: .element { background : var ( --bg-color ) ; color : contrast-color ( var ( --bg-color ) ) ; } That’s from Lea Verou’s great piece about generating text colors . The way it works is that you pass a background color into the function and it’ll spit out a color that’s accessible to read as text on top of it. This solves about 90% of…
Drew Powers wrote about how to polish UI and described this process as the 3 layers of UI interaction : Render area: where does this element appear? Hit area: what is the shape/size/placement of the invisible interactive area? Focus area: when Tab-ing, what is the focus ring shape/placement? What happens when you don’t care for these things? Well, I reckon everything about a UI then feels…
This post by Chuan about time-based CSS animations has a ton of bonkers CSS tricks that are worth checking out: After years of wait, CSS now has enough Math functions supported, particularly mod() , round() , and trigonometric functions . It's time to revisit the time-based way of animation, hope it'll be more useful this time. Chuan uses these functions to set up a custom variable via the CSS…
Here’s a great video course about the power of scroll driven animations by Bramus and he takes what we already know about CSS animations but gets into the nitty gritty new-ness of binding these fancy animations to the reader’s scrolling behavior. Speaking of which, here’s Bramus writing about them in his ever-so-excellent demo page from a while back: Scroll-driven animations are a common UX…
Scott Jehl just kickstarted his course on web components and it just sounds great: Fortunately, we now have a standard component model built right into our browsers, and using its various technologies can help us cut delivery weight and reduce complexity. Many of the largest companies in the world have already begun transitioning their sites and design systems to use web components, and major…
Andy Bell set out to convert all the hex colors (like #FFFFFF for white) into p3 colors and wrote up his process : I’ll be honest. I am not smart enough to explain the new colour systems that CSS has in its ever-expanding toolset. What I can do though, is show you what a major impact they can have with not much effort. Andy also links to hexp3.com which lets ya pass in any hex value and it’ll do…
Miriam Suzanne gave a fantastic talk the other day during 11ty’s International Symposium on Making Web Sites Real Good and I couldn’t possibly recommend it more. The highlight for me was when Miriam talks about the “CSS is awesome” meme: This is the reason that the default overflow is visible: if we get cocky and make a box too small for our text, browsers will try to bail us out. Not because it’s…
Great tip from Dave Rupert : If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider. Switching to border-color: transparent makes inputs and buttons much more visible in High Contrast Mode. Huh.
Smart take here from Jeremy about composable design systems : Colours, spacing, type; these are all building blocks that a designer can compose with. But it gets murkier after that. Pre-made form fields? Sure. Pre-made forms? No thank you! It’s like there’s a line where a design system crosses over from being a useful toolkit into being a bureaucratic hurdle to overcome. When you hear a designer…
Rachel Andrew : The Chrome team believes that masonry should be a separate layout method, defined using display: masonry (or another keyword should a better name be decided upon). Later in this post, you can see some examples of what that could look like in code. There are two related reasons why we feel that masonry is better defined outside of grid layout—the potential of layout performance…
Cool cool cool : Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibilities. Let us fix this pressing…
Una Kravets has the scoop on the Popover API being fully supported in browsers : It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces like tooltips, menus, teaching UIs,…
The other day I made a daft and careless mistake whilst writing about cool queries and specifically this bit of code: .parent { max-width : 300px ; } .child { width : 500px ; @media ( overflow-inline ) { background : yellow ; } } After misreading the spec and making a quick demo in the browser, I thought I had cracked the problem of being able to detect scrollable containers with just CSS. I…
The other day I mentioned Saneef Ansari’s excellent postcss-design-token-utils that converts a bunch of JSON into custom CSS properties and utility classes. At the end I aggressively rambled about how much I’d love to see this as a dedicated website and, well, Saneef built the darn thing! It’s called Design Token to CSS and it’s very much worth checking out. I’ve fallen out of the loop a little…
Making shapes with CSS will never fail to impress me and I just spotted this great resource by Temani Afif that has a ton of examples . You’ve got the basics, like squares, triangles, and circles but then the more wild examples like ribbons and grid lines . Great stuff. Also, completely unrelated to all this, but I had a lot of fun scrolling through Temani’s work on Codepen. Especially this…
There’s lots of query-related things that CSS can do that’s pretty neat. First up you’ve got your bog standard media queries where you can activate some styles when the size of the viewport reaches a certain value: @media ( min-width : 700px ) { .my-element { background : yellow ; } } But now that nesting has pretty good support then it’s just a whole lot nicer to organize them more like this:…
Ryan Mulligan on the new-to-me scripting CSS media feature : With this feature, we can provide alternative CSS rules depending on whether or not JavaScript is available in the user's browser. It can also help reduce flashes of unstyled content or undesirable layout shifts. This is super neat, so you can now write a media query and ask the browser if JavaScript is on: @media ( scripting : enabled )…