The Missing CSS Stylesheet
(missing.style)
missing.css is the CSS library we wished already existed.
missing.css is the CSS library we wished already existed.
CSS Zen Garden
(csszengarden.com)
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.
Default styles for h1 elements are changing
(mozilla.org)
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured websites.
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured websites.
Better typography with text-wrap pretty
(webkit.org)
Support for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web. Let’s take a look at what the WebKit version of pretty does — it’s probably a lot more than you expect. Then, we’ll compare it to balance and the other text-wrap values to better understand when to use which one.
Support for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web. Let’s take a look at what the WebKit version of pretty does — it’s probably a lot more than you expect. Then, we’ll compare it to balance and the other text-wrap values to better understand when to use which one.
Dark mode with almost no CSS
(feep.dev)
Feep! now has a dark mode theme! The stylesheet for the site is a fairly minimal set of overrides on top of the browser default stylesheet, so adding this support was actually pretty straightforward, though there were a few complications.
Feep! now has a dark mode theme! The stylesheet for the site is a fairly minimal set of overrides on top of the browser default stylesheet, so adding this support was actually pretty straightforward, though there were a few complications.
CSS Clicker – incremental game about making a personal web, written in pure CSS
(lyra.horse)
CSS Clicker is an incremental game themed around making websites.
CSS Clicker is an incremental game themed around making websites.
CSS-Only Glitch Effect
(muffinman.io)
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.
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.
Rewriting my site in vanilla web
(leanrada.com)
I rewrote this website in vanilla HTML/CSS/JS. Here’s the story.
I rewrote this website in vanilla HTML/CSS/JS. Here’s the story.
Item Flow, Part 1: A new unified concept for layout
(webkit.org)
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want. One of those things is a popular layout pattern called “masonry” or “waterfall,” which currently still requires a Javascript library to accomplish.
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want. One of those things is a popular layout pattern called “masonry” or “waterfall,” which currently still requires a Javascript library to accomplish.
Show HN: CSS Clicker – a pure-CSS idle game where you build your own website
(lyra.horse)
CSS Clicker is an incremental game themed around making websites.
CSS Clicker is an incremental game themed around making websites.
The <select> element can now be customized with CSS
(chrome.com)
From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable <select> element on the web.
From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable <select> element on the web.
Minimal CSS-only blurry image placeholders
(leanrada.com)
Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed!
Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed!
Ask HN: Building a Non-AI tool feels surprisingly refreshing for me
(ycombinator.com)
Lately, I’ve been working on a small side project: a web tool for creating radial and circular layouts using CSS only. What I’ve enjoyed the most is that it’s completely non-AI—just code, logic, and design decisions made by hand.
Lately, I’ve been working on a small side project: a web tool for creating radial and circular layouts using CSS only. What I’ve enjoyed the most is that it’s completely non-AI—just code, logic, and design decisions made by hand.
CSS Form Control Styling Level 1 – W3C First Public Working Draft
(csswg.org)
This CSS Module defines various ways of styling form controls and their different parts.
This CSS Module defines various ways of styling form controls and their different parts.
Matching drop shadows across CSS, Android, iOS, Figma, and Sketch
(bjango.com)
If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.
If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.
Minding the gaps: A new way to draw separators in CSS
(windows.com)
Drawing separator lines between various sections of a webpage is a common design technique, which can help to structure the content and make it more readable, as well as more aesthetically pleasing.
Drawing separator lines between various sections of a webpage is a common design technique, which can help to structure the content and make it more readable, as well as more aesthetically pleasing.
Styling an HTML dialog modal to take the full height of the viewport
(simonwillison.net)
I've been experimenting with the HTML dialog element recently, for example in my Prompts.js JavaScript library.
I've been experimenting with the HTML dialog element recently, for example in my Prompts.js JavaScript library.
Take a New Look at CSS Shapes (2018)
(smashingmagazine.com)
This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes.
This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes.
Privacy and the :visited selector
(mozilla.org)
Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.
Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.
You suck at CSS and that's okay (2022)
(rexriepe.com)
This book is about writing CSS. It's also about not writing CSS. It's aimed at people who want to learn CSS, people who want to avoid CSS, amateurs, professionals and everyone in-between. The book aims to provide context as to why CSS and the design ecosystem surrounding it are the way they are. It's written to support the California Stylesheets CSS framework.
This book is about writing CSS. It's also about not writing CSS. It's aimed at people who want to learn CSS, people who want to avoid CSS, amateurs, professionals and everyone in-between. The book aims to provide context as to why CSS and the design ecosystem surrounding it are the way they are. It's written to support the California Stylesheets CSS framework.
Functions in CSS?
(css-tricks.com)
A much-needed disclaimer: You (kinda) can use functions now! I know, it isn’t the most pleasant feeling to finish reading about a new feature just for the author to say “And we’ll hopefully see it in a couple of years”. Luckily, right now you can use an (incomplete) version of CSS functions in Chrome Canary behind an experimental flag, although who knows when we’ll get to use them in a production environment.
A much-needed disclaimer: You (kinda) can use functions now! I know, it isn’t the most pleasant feeling to finish reading about a new feature just for the author to say “And we’ll hopefully see it in a couple of years”. Luckily, right now you can use an (incomplete) version of CSS functions in Chrome Canary behind an experimental flag, although who knows when we’ll get to use them in a production environment.
CSS Custom Functions are coming
(bram.us)
Chrome is currently prototyping CSS Functions, which is very exciting!
Chrome is currently prototyping CSS Functions, which is very exciting!
Knowing CSS is mastery to front end development
(helloanselm.com)
There are countless articles why developers should not focus on Frameworks too much and instead learn to understand the underlying languages. But I think rarely we can find good reasons except that Frameworks come and go. To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language.
There are countless articles why developers should not focus on Frameworks too much and instead learn to understand the underlying languages. But I think rarely we can find good reasons except that Frameworks come and go. To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language.
CSS-zero: opinionated CSS starter kit for your "nobuild" application
(github.com/lazaronixon)
An opinionated CSS starter kit for your "nobuild" application.
An opinionated CSS starter kit for your "nobuild" application.
BritCSS: Fixes CSS to use non-American English
(github.com/DeclanChidlow)
Fixes CSS to use non-bastardised spellings.
Fixes CSS to use non-bastardised spellings.
The difference between zoom and scale
(css-tip.com)
Do you know the zoom property? It works the same way as a scale transformation but unlike scale, it affects the page layout. In other words, the page layout is recalculated considering the new dimension of the scaled element.
Do you know the zoom property? It works the same way as a scale transformation but unlike scale, it affects the page layout. In other words, the page layout is recalculated considering the new dimension of the scaled element.
Oklch in CSS: why we moved from RGB and HSL (2024)
(evilmartians.com)
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.