Are you aware how ARIA reside areas work? Or do you typically wrestle to middle textual content vertically? Or wish to get began with scroll-driven animations however do not know the way?
Activate the Net Weekly tune and discover all of the solutions beneath. Get pleasure from!
Do you wish to share your favourite music with the Net Weekly neighborhood? Hit reply; there are 4 extra songs left within the queue.
This Net Weekly challenge is already beefy sufficient, so I am going to skip a protracted intro and solely open with some single-purpose URLs to your every day web use.
I simply adore it once I can reply somebody with a URL.
In uncommon instances like AB testing, you would possibly wish to delay rendering to keep away from format shifts. However how do you do that with out blocking the HTML parser?
I can solely consider a not-so-great opacity: 0 hack, however fortunately, there is a new property on the horizon — blocking: render.
✱ however provided that you realize what you are doing.
I nonetheless have not made it to play with scroll-driven animations (Chromium-only), however once I do, I am going to positively begin by watching Bramus’ new, free course.
And here is Bramus once more: CSS specificity and the cascade are highly effective but in addition complicated.
Three widespread however improper specificity ideas are:
- Specificity is a decimal rating.
- Utilizing the
modelattribute provides Specificity. - Utilizing
!necessaryprovides Specificity.
Should you assume considered one of these is true, this submit if for you.
Refresh your CSS understanding
I simply arrange a GitHub repo that visits my web site, takes screenshots and commits them to the repo. I like to archive issues.
If you wish to doc how your websites change over time, Alex wrote a superb tutorial about it.
Wowza! Would you take pleasure in getting Net Weekly straight to your inbox?
I do not know this map’s knowledge supply, however following all of the Web’s hyperlinks is simply magical.
Should you marvel how ARIA reside areas work and the way it’s best to use them to make your web site’s updates extra accessible, Patrick examined display screen reader / browser combos and shares suggestions.
Should you’re setting rel="noopener" in your hyperlinks to forestall entry to window, cease it and avoid wasting characters.
Patching globals would possibly appear to be an affordable method so as to add performance to the platform, however often it fights again shortly. It puzzles me that JS ecosystem heavyweights Subsequent.js, React and Bun thought it was a good suggestion. This submit explains what to do as an alternative. 💯
I am not often a fan of those “centering issues in CSS laborious” jokes, however final week, I desperately tried to align an icon subsequent to a customized font. And what ought to I say? I gave up…
Niki got here alongside simply in time with some font magic in order that I can sort out issues once more subsequent week.
Thanks Simon, for sending this text over!
From the limitless MDN information archive…
Here is a enjoyable one: you most likely know that once you scale a component through CSS, it would not have an effect on its format dimension.
Typically, I discover this complicated, however if you wish to scale the precise dimension, zoom does this. And the CSS property is nearly to enter the baseline.
Chrome helps it since model 1 (#wat?), Safari joined the get together with model 3 (#wat^2)? and now, in 2024, Mozilla determined to prioritize zoom with Firefox 126. 😅
Let me know if you realize why this “old-fashioned” property was thought-about now. I am tremendous curious!
I attempted to pair !necessary with customized properties some time in the past and bumped into an enormous shock. If the code above surprises you, this submit is for you.
Study in regards to the cascade
It is nonetheless in progress, however Firefox, because the lacking engine, began engaged on transition-behavior. What’s it good for?
You most likely know the issue of setting opacity: 0 and show: none in the identical go, making a clean transition inconceivable. transition-behavior lets you transition opacity and flip over show as soon as opacity is ready to 0. Magic!
Should you’re working with SVGs and are pissed off that design instruments aren’t exhibiting you code (at the very least I have not found these options), SVGViewer allows you to tweak and preview SVGs with code. That is golden! 👇
💙 Should you realized one thing from this challenge, give again and assist me with a small donation on Patreon.
These small gestures actually assist me keep motivated. 😊
I take advantage of a AI every day, however there’s nothing extra so as to add to this quote from Molly White’s article.
[AI tools] are helpful in the identical method that it’d sometimes be helpful to delegate some duties to an inexperienced and typically sloppy intern.
Liked this electronic mail? Hated this electronic mail? I wish to hear about it!
Should you assume there’s one thing that must be improved or one thing that you simply loved, reply to this electronic mail as a result of I wish to know extra!
And with that, handle your self – mentally, bodily, and emotionally.
I am going to see you subsequent week! 👋
