Link List

A lit­tle fix for Safari.

Learn how to use CSS con­tain­er queries today.

text-wrap: bal­ance ele­vates respon­sive design by auto-bal­anc­ing text lines. Learn its lim­i­ta­tions, brows­er sup­port, and meet its new sib­ling, text-wrap: pret­ty.

Vel­vette is a library that allows you to spec­i­fy in a declar­a­tive way how your tran­si­tions should behave, in iso­la­tion or as a response to a nav­i­ga­tion, and then apply the dec­la­ra­tion to a par­tic­u­lar View­Tran­si­tion, Nav­i­ga­teEvent, or use it to han­dle cross-doc­u­ment (“MPA”) nav­i­ga­tions.

Some­times, improv­ing your appli­ca­tion CSS just takes a one-line upgrade or enhance­ment! Learn about 12 prop­er­ties to start incor­po­rat­ing into your projects, and enjoy reduc­ing tech­ni­cal debt, remov­ing JavaScript, and scor­ing easy wins for user expe­ri­ence.

Some­times, improv­ing your appli­ca­tion CSS just takes a one-line upgrade or enhance­ment! Learn about 12 prop­er­ties to start incor­po­rat­ing into your projects, and enjoy reduc­ing tech­ni­cal debt, remov­ing JavaScript, and scor­ing easy wins for user expe­ri­ence.

With :has() land­ing in Chromi­um 105. Let’s take a look at some of the awe­some oppor­tu­ni­ties it brings to our CSS!

CSS is under­go­ing a ​“qui­et renais­sance,” incor­po­rat­ing many sig­nif­i­cant fea­tures that pre­vi­ous­ly required exter­nal tools into the native parts of the lan­guage.

Opt-in opti­mized text wrap­ping, for beau­ty over speed.

Set the num­bers and units of your columns and rows, and gen­er­ate a CSS grid. Drag with­in the box­es to cre­ate divs placed with­in the grid.

A few inter­est­ing CSS find­ings from the threads app by Meta.

A Tail­wind CSS plu­g­in to gen­er­ate util­i­ty class­es for inter­po­lat­ed flu­id type and space scales based off utopia.fyi — cws­dig­i­tal/­tail­wind-utopia: A Tail­wind CSS plu­g­in to gen­er­ate util­i­ty class­es for inter­po­lat­ed flu­id type and space scales based off utopia.fyi

Encode SVGs eas­i­ly to more eas­i­ly style them with CSS and JS.

Flu­id respon­sive design. Utopia is not a prod­uct, a plu­g­in, or a frame­work. It’s a set of free tools to sup­port your next Utopi­an project.

Learn how to migrate a fron­tend app from Web­pack to Vite, includ­ing why you should do it, and how to install Vite and update plu­g­ins.

A few inter­est­ing CSS find­ings from the threads app by Meta.

What if I will tell you how we could solve fit-to-width text with pure CSS with­out any hard­cod­ed para­me­ters? Curi­ous­ly, scroll-dri­ven ani­ma­tions will allow us to do just that! Join me as I con­tin­ue explor­ing the exper­i­men­tal imple­men­ta­tions of the lat­est specs.

CSS mix blend modes pro­vide an easy, yet pow­er­ful way to cre­ate visu­al­ly inter­est­ing designs.

Apply­ing a shad­ow to a sticky page head­er when scrolling using the Inter­sec­tion Observ­er API.

To learn more about the behav­iors of con­tain­er query units, we’ll explore three flu­id typog­ra­phy tech­niques applied via a ​“mix­in” using cus­tom prop­er­ties. These upgrad­ed meth­ods will pro­duce tru­ly respon­sive typog­ra­phy, regard­less of con­text.

For­mat ordered lists in con­tract for­mat. Top-lev­el ol > li styled as ​“1.” with nest­ed, ol ol > li, styled as ​“1.1” and third tiers, ol >ol > ol > li, styled as ​“1.1.a”.

Demo of the ​‘goo’ fil­ter as shown in this video: https://​twit​ter​.com/​s​n​o​r​k​l​T​V​/​s​t​a​t​u​s​/​1​6​3​8​2​5​7​1​2​4​1​2​6​9​12522

A new API is com­ing to the web plat­form to help you posi­tion ele­ments in an adap­tive way with no tricks.

This is my favourite thing to do with the :nth-of-type() selec­tor.

This file in the about­feeds repo will trans­form your raw-look­ing RSS feed into a styled doc­u­ment when users click on your feed icon. It will now include instruc­tions help­ing the user under­stand how to use feed icons across the web.

Quick­ly cal­cu­late any CSS selec­tor speci­fici­ty score along with expla­na­tions. With full sup­port for com­plex CSS selec­tors.

A side-effect when show­ing scroll­bars on the web is that the lay­out of the con­tent might change depend­ing on the type of scroll­bar. The scroll­bar-gut­ter CSS prop­er­ty aims to give us devel­op­ers more con­trol over that. Works in Chrome and Fire­fox. No sup­port in Safari yet.

Cal­cu­lat­ing a flu­id font size can be tricky. This is the tool I use to make pre­cise flu­id typog­ra­phy with the clamp CSS func­tion.

Adam Argyle has a post on using the View Tran­si­tion API, which is still a canary fea­ture now, to pow­er text tran­si­tion with CSS.

Cre­ate, edit and save Tail­wind CSS col­or shades based on a giv­en hex­code or pick a col­or from an image.