Do you want native CSS features to exist? Do you employ the media question vary syntax? And are you aware of all these HTML enter attributes that improve consumer expertise?
Activate the Net Weekly tune and discover all of the solutions beneath. Take pleasure in!
Do you wish to share your favourite track with the Net Weekly neighborhood? Hit reply; there are two extra songs left within the queue.
There’s been some information on the consumer agent stylesheet entrance. Beforehand, browsers shipped these CSS strains.
What do they do? In one other life, there was the thought of context-aware heading ranges. The heading stage (h1, h2, …) would rely upon the heading place contained in the doc. For instance, if a number of nested part components embody an h1, the nested headings would obtain their stage relying on the encircling HTML. The CSS strains above make this idea seen.
And you have learn that proper, an carried out define algorithm would imply that a number of h1 components can be legitimate, and sustaining heading ranges can be extra manageable. Each element or template might ship an h1, and the browsers would mechanically work out their semantic stage. I nonetheless assume the algorithm is a good suggestion, however sadly, browsers by no means carried out it.
Now, in 2025, it is time to take away this relict from the consumer agent stylesheets. Firefox plans to take away it in 140, Chrome at the moment reveals a warning if you depend on these types, and Lighthouse checks for it. Simon shares all of the nitty gritty particulars over on MDN.
And talking of consumer agent stylesheets, Manuel began engaged on UA+. What’s that?
UA+ is not yet one more reset or normalize. The stylesheet consists of fast guidelines that are not overwriting or resetting browser defaults however enhancing the final consumer expertise. I am a giant fan, and I am positive you may discover some issues to repeat in your tasks!
Should you take pleasure in Net Weekly, assist me develop this text and let your mates know…
A fast “repost” actually helps this indie e-newsletter out. Thanks! ❤️
The problem for the subsequent technology of AI corporations is not simply technological – it is discovering visible language that communicates innovation with out resorting to the identical drained sphincter-inspired patterns.
I really like the “scientific” evaluation protecting an important query at this time — Why do AI firm logos seem like buttholes? 😅
Whereas it is nonetheless within the early phases, Chrome Canary ships a brand new, let’s name it “groundbreaking”, CSS characteristic: features! What? Sure!
Who’s now saying CSS is not a programming language?
You would possibly find out about text-wrap: steadiness; which is offered on the baseline for some time. However are you aware about text-wrap: fairly;?
Chromium ships “fairly textual content blocks” for some time and future Safari will quickly, too. The twist: Safari and Chromium will ship totally different implementations. Take a look at the delicate distinction within the screenshot above. 😱
Jen explains the variations, explains textual content rendering particulars, and shares some present spec work (text-wrap: avoid-short-last-lines).
If I might ask you about the very best programmers you realize, there are most likely a couple of people coming to thoughts. However what made these nerds stand out? Matthias collected some strong recommendation to grow to be one in all these nice engineers.
As somebody who used to take care of a considerably profitable open supply mission and has been burned fairly badly by “folks”, I can greater than relate to Declan’s take explaining what open supply is not.
Deal with your maintainers properly.
Wowza! Would you take pleasure in getting Net Weekly straight to your inbox?
It took me roughly 90s to complete the checkbox race. Are you able to beat me?
This publish is not new, but it surely’s a superb reminder that enter components include extra attributes than the apparent sort.
I am nonetheless skeptical concerning the new attr() options (at the moment, Chromium solely), however, as all the time, Ahmad does a stellar job explaining in what eventualities it would make sense. It is nothing you could not do with inline types paired with customized properties, however I do assume that having “clear” attributes makes issues a bit nicer.
What do you consider it?
Fashion parts by way of properties
Sorting strings can shortly grow to be a nightmare with all of the human languages on the market. I imply, take a look at all these particular characters: É, Ǒ, Ã, … To type these in a considerably affordable means, I’d often attain for localeCompare(), however I discovered that everybody’s most favourite util, Intl, presents a sooner answer.
Chris discusses if utilizing currentColor nonetheless is smart at this time. I am voting with a powerful “YES!” however make up your personal thoughts!
Enjoyable truth: at this time I discovered that CSS would not care concerning the capitalization of currentColor. CURRENTCOLOR, currentcolor and all variants nonetheless work. #wat
From the limitless MDN information archive…
Should you’re nonetheless utilizing the Array bracket notation, you need to take a look at
Should you’re utilizing hr component for styling, keep in mind these components aren’t “simply” horizontal strains.
The next is not “innovative new” however nonetheless a characteristic that counts as new on the baseline. Are you aware that media queries assist a shorter vary syntax? Now you do. 🫵
If Net Weekly is not sufficient studying materials for you and also you additionally wish to keep up-to-date on extra fullstacky issues, my buddy Luciano runs the Fullstack Bulletin, and you need to test it out should you’re additionally into the server facet of issues.
Brecht created a shade palette generator {that a}) makes use of the OKLCH shade house and b) consists of some fancy math to make the palette look extra pure.
I feel I simply discovered concerning the first CSS sin use case that is not a proof of idea hack!
And if you’re questioning why you need to undertake oklch(), I blogged about the benefits of the brand new shade house.
There’s nothing extra so as to add to Dave’s take.
Enshittification implies that an individual who lacks style was put able of energy.
In that case, be part of 22 different Net Weekly supporters and provides again with a small month-to-month donation on Patreon or GitHub Sponsors.
Beloved this electronic mail? Hated this electronic mail? I wish to hear about it!
Should you assume one thing wants enchancment or one thing sparked some pleasure, reply to this electronic mail as a result of I wish to know extra!
And with that, deal with your self – mentally, bodily, and emotionally.
I will see you subsequent week! 👋
