Defensive CSS
(defensivecss.dev)
Practical CSS and design tips that helps in building future-proof user interfaces.
Practical CSS and design tips that helps in building future-proof user interfaces.
How to have the browser pick a contrasting color in CSS
(webkit.org)
Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color? Well, now you can, with contrast-color(). Here’s how it works.
Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color? Well, now you can, with contrast-color(). Here’s how it works.
Really Really Simple "Pure CSS" Squircles
(github.com)
Pure CSS Squircle has always been the fantasy of a web developer's good nights sleep.
Pure CSS Squircle has always been the fantasy of a web developer's good nights sleep.
CSS Attr() Gets an Upgrade
(chrome.com)
With CSS attr() you can use the value of an HTML attribute in your CSS. Until now attr() only worked within the content property of pseudo-elements and could only parse values into a CSS <string>.
With CSS attr() you can use the value of an HTML attribute in your CSS. Until now attr() only worked within the content property of pseudo-elements and could only parse values into a CSS <string>.
The Height Enigma (CSS)
(joshwcomeau.com)
Back when I was first trying to understand CSS, one of the biggest mysteries to me was why height sometimes wouldn’t work.
Back when I was first trying to understand CSS, one of the biggest mysteries to me was why height sometimes wouldn’t work.
Plain Vanilla Web
(plainvanillaweb.com)
An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
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.