Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch
units to define our page layout. This meant that our post content was equal to 50ch
units (or the width of fifty…
There are 99 contents with this tag:
Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch
units to define our page layout. This meant that our post content was equal to 50ch
units (or the width of fifty…
display: contents considered harmful
At this point, I don’t think we as an industry can use display: contents
with confidence. Past actions are a good indicator of future behavior,…
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using object-fit: cover;
in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source>
in a <picture>
?
HTML and CSS based View Transitions are coming
While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷♂️).
Early Days Examples of View Transitions
All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are…
Getting started with View Transitions on multi-page apps
View Transitions for MPAs are a feature that’s high on my CSS wishlist, so I got to it. It took less than an hour to do, requires zero JavaScript,…
TIL: a:link
in CSS doesn't match a
elements without any href
attribute! 😲
https://codepen.io/nhoizey/pen/dyggeOJ
It makes sense, but I never use a
elements without href
attributes (different from #
of course), so I didn't know… 🤷♂️
The ongoing defence of frontend as a full-time job
We truly are the shape shifters of the market. So to say that someone who is “just” a frontend developer isn’t flexible enough means first and foremost…
Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and…
I'm really honored to see my article about running CSS animations only if both the device and the user allow it being mentioned in the 99th episode of Stefan Judis' great Web Weekly newsletter! 🥰
Pixels vs. Relative Units in CSS: why it’s still a big deal
Remember, users really do change their settings under the hood, and we should be maintaining users’ control over their own browsing experience. If…
3 Methods for Scoped Styles in Web Components That Work Everywhere
WebC allows folks to broaden access to things built with web components without the drawbacks of other methods I really have to try WebC more seriously,…
Running CSS animations only if both the device and the user allow it
Thanks to Chrome release notes, I discovered today that there is an update
media feature which accepts values fast
, slow
and print
, to set styles depending on the ability of the device to update the rendering and the speed of it. As I'm already respecting the user's preference with the prefers-reduced-motion
media feature, I wondered how I could progressively enhance this with the new media feature.
Chrome 113 beta adds support for @media (update: slow)
(Firefox already has it), great to remove some animations.
But can we @supports
a @media
to use it only if supported? I don't think so.
How do you use new @media
features progressively?
On Container Queries, Responsive Images, and JPEG-XL
It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now…
Using :is() in complex selectors selects more than you might initially think
While I wouldn’t write a selector like that myself, this is highly relevant because of CSS Nesting that is getting specified. There, the Nesting Selector…
what will happen to Sass’s nesting? First of all, we won’t ever change existing valid Sass code so that it starts emitting CSS that’s incompatible…
Ten tips for better CSS transitions and animations
users may not realize what it is about the transitions or animations on our websites and apps, but they can keenly spot the difference between good…
Firefox 110 will be released on February 14th, for all Container Queries lovers! 🥰
The Right Way to Use fonts.com Web Fonts
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a…
While we wait for browsers to implement the text-wrap: balance;
#CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:
https://codepen.io/nhoizey/pen/mdjbrVx
Tell me what you think!
But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅
Many of the latest additions to HTML, CSS, and JavaScript first existed as JavaScript libraries or frameworks or pre-processors or polyfills and then…
Our web design tools are holding us back
nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we…
Layout & Grid in Design Systems
This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process,…
The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how…
Yet another great Utopia tool, this time for grids, but the right way: the 12 column grid itself is an illusion, or at best a fading artefact of the…
Sam Magura
Why We're Breaking Up with CSS-in-JS
Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer…
TIL @media not (min-width: 60rem) { … }
doesn't work in Safari, while it works in Chromium and Firefox.
Safari requires a media type, like all
.
So here's the "right" syntax:
@media not all and (min-width: 60rem) { … }
a tool that automatically matches the fallback font to the custom font–because computers are good at that stuff. The tool allows you to select every…
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Using :has() as a CSS Parent Selector and much more
let’s take a step-by-step hands-on look at what web developers can do with this desperately desired tool. It turns out, the :has()
pseudo-class…
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
💡 CSS idea of the day:
:root {
--full-height: 100vh;
}
@supports(height: 100dvh) {
:root {
--full-height: 100dvh;
}
}
Clever? Stupid? Old?
This is really clever, I hope we'll get support for :has()
everywhere soon! I can remember a time when it was difficult to find selectors that would…
The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
Josh's attention to details in all his articles is awesome. Here, he's presenting evidences that the rem
unit should be used for font sizes, media…
The Minimum Content Size In CSS Grid
Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize…
I started updating my photography site with new Media Queries and CSS environment variables to make sure Surface Duo owners enjoy it even more! 🎉
Other foldable devices will come if it makes sense.
You have a Surface Duo? Feedback is welcome! 🙏
Expandable Sections Within a CSS Grid
This is a great use case for CSS Grid's dense packing algorithm! I also love how Kev suggests this could replace annoying pop-ins/modals: This could…
Does shadow DOM improve style performance?
This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids,…
Anyone knows why in #Firefox sometimes the button in the bottom of https://nicolas-hoizey.com/archives/ is outside its container, while everything is fine in #Chrome? 🤔
Maybe a CSS Grid issue?
Rendering issue in Firefox
Everything is fine in Chrome
I didn't know comments could be featured on @css, but it looks like it's a thing! 😲
Thanks @markconroy, sorry for the late discovery. 🙏
Based on #CanIUse data, using gap
with Flexbox with no fallback means half iOS users won't get the right layout.
It might be a bit too soon… 🥲
Working on my photography site, I wanted to show a few photos from folder in a gallery, and built something cool with just CSS.
But is it really cool, or just cool once and then annoying?
Try it live on desktop: nicolas-hoizey.photo/travels/europe/
youtu.be/VmwJ4KInloQ
I finally decided the effect on hover was too invasive and difficult to tweak, so I changed for a much more traditional way to show multiple images of a folder: a diaporama with a Ken Burns effect.
The Large, Small, and Dynamic Viewports
Bramus shows how the situation might finally improve for viewport height CSS units, more than 6 years after I reported the unreliable 100vh value…
Is the margin-block
CSS logical property really still not supported in #Edge ? 😭
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block#browser_compatibility
Positioning Overlay Content with CSS Grid
These are really nice ways to use CSS Grid!
A Bashful Button Worth 8 Million Dollars
6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and…
Responsive SVGs - container vs media queries
Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML. Responsive…
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭
Any suggestion?
Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.
A 7 years old bug in #Firefox … 😭
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106
I know there are workarounds.
No, Utility Classes Aren't the Same As Inline Styles
People who follow me should now know that I'm not a big fan of "utility alone" CSS (yet?), but I do use some utility classes in my own code and understand…
4329 is a long discussion about how people are really, really, REALLY unhappy how on mobile the viewport units don't represent the size of the viewport — @fantasai https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-814281379
😅
6 years later, this is still my most read article…
When I import my Google Analytics data in #CanIUse, it says only 80 % of my visitors have support for CSS clamp()
, while it's 90 % globally. 🤔
I have almost only tech-savvy visitors, so I don't understand. 🤷♂️
I learned a lot with this detailed article about z-index
! When it comes to CSS, things work in a similar way: elements are grouped into stacking…
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
Is there some sort of shape-outside: self;
in CSS, to use an image as it's own shape? 🤔
I couldn't find it in any docs, but it would be really useful to not declare the same URL twice.
So there it is, 5 different variations of fully accessible, CSS only mobile menu. I might have overdone it, but it was fun.
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.…
HTML and CSS techniques to reduce your JavaScript
relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards.…
I'm a developer, not a graphic designer, so I genuinely wonder if CSS Grid and Flexbox automated layout and space management would be better for the flexible Web than such rigid artificial grids. I'm really wondering.
Responsive Grid Design: Ultimate Guide
This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892
Get a list of local URL links from a root URL. Works with JavaScript generated content. Can also act as a live-DOM CSS search across multiple files…
Wonder if #EveryLayout's sidebar could be used for a media component where the image is on top by default, and on the right when there's enough space.
Looks like it's either 1st element on the left or 2nd element on the right… 🤔
Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means…
Full-Bleed Layout Using CSS Grid
Josh shows here beautifully how to use CSS Grid to contain page elements' width and have some expand outside this containment. As the web has evolved,…
Breaking out with CSS Grid explained
Here is a detailed explanation of Tyler Stika's Breaking Out With CSS Grid Layout article I shared previously. What this demonstrates is that when…
Breaking Out With CSS Grid Layout
Now that CSS Grid support in browsers is great, I will start using this nice layout presented by Tyler more than 3 years ago. We want to limit the…
Intrinsically Responsive CSS Grid with minmax() and min()
I've been using a CSS Grid layout on some pages here for a while, and had issues with some of it triggering an horizontal scroll on thin viewports…
Enhancing User Experience With CSS Animations
Another amazing resource from Stéphanie, a detailed transcript of a talk she gave for Shift Remote. With CSS and JS progress, implementing animations…
Style Stage and old people of the web
Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh…
Inclusively Hiding & Styling Checkboxes and Radio Buttons
Sara shows us how to properly use SVG and CSS to design beautiful, engaging and accessible checkboxes and radio button in her new very detailed article,…
I remember seing a clever design years ago that had this effect on scroll, but it was just for a logo, with a single image. Now that we have clip-path
…
I know some utility classes can be useful, and #Tailwind helps some devs create pages without (really) knowing #CSS, but is it enough to justify this logorrhea in our HTML?
Keir Watson
Responsive Grid Magazine Layout in Just 20 Lines of CSS
Interesting dive into some of CSS Grid subtleties, to build a nice magazine layout. Incredibly, this layout only took 21 lines of CSS (excluding global…
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use…
The CSS Cascade, or how browsers resolve competing CSS styles
This is a great explanation/illustration of the CSS Cascade! 👍
If you don't understand why CSS is one of the great strengths of the Web, even if you've been using it for a while, you really have to spend these…
Rémy and a few others launched an awesome resource for people who plan to struggle with rich email using HTML and CSS, which are not well supported…
Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website: There's a few things going on…
Chen Hui Jing helps fix a little issue with overflowing Flexbox containers: If you have tried to apply padding to a flex container with an horizontal…
Andy Bell
and
Heydon Pickering
Every Layout: Relearn CSS layout
Andy and Heydon teach us CSS layout with modern standards, what they call "algorithmic layout design ": Employing algorithmic layout design means…
Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.…
Front-end Developer Handbook 2019
If you want to grok the great diversity of topics and technologies involved in Front-end Web development, here is probably the most comprehensive…
Implementing a Mockup: CSS Layout Step by Step
If you don't know yet how to do Web layout with CSS, or feel like struggling with it, this great (baby) step by step tutorial will help you a lot:…
Fading out siblings on hover in CSS
Trys here shows a nice little CSS trick to make hovered elements pop out (quite easy), while diming the siblings (that's the trick). Well done!
Yuan Chuan creates art from everything available in CSS, created < css-doodle />
(a web component for drawing patterns with CSS), and gave a talk…
Sophisticated Partitioning with CSS Grid
Tinnitus Tracker is the live music diary of Rob Weychert, listing more than 300 shows he's attended. Events lists can be really boring to scroll through,…
Font sizing with rem could be avoided
I don't really agree with the simple statement made in the title of this article, as sizing fonts with rem
is sometimes useful to escape the default…
The Flexbox Holy Albatross Reincarnated
when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid…
CSS Indexes: A listing of every term defined by CSS specs
This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as…
Viewport height is taller than the visible part of the document in some mobile browsers
When trying to use a 100vh
CSS value to build a new interface for a game that would use the full viewport, I discovered that this full height value…
There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉
OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu'il y a des outils…
Les spammeurs s'y connaissent en CSS
Un p'tit malin qui se fait appeler Sylvain a laissé un commentaire très sympathique sur mon billet précédent. Mais il a aussi glissé subrepticement…
Laissons IE6 mourir sans style, et ses utilisateurs entrevoir la lumière
Bon, allez, ça va un peu les enfantillages, mais il est temps de montrer aux utilisateurs de IE6 que non, ils n'utilisent pas un bon navigateur, mais…
Oncle Tom m'a envoyé en douce il y a quelques jours une patate chaude en m'invitant à vous parler de mes conventions de codage. Vaste sujet, et surtout…
Afficher les favicon dans la barre personnelle de Firefox sous Mac OS
Dans sa version Mac OS, Mozilla Firefox est configuré pour ne pas afficher l'icône personnalisée d'un site à côté d'un favori placé dans la barre…
CSS : on reprend tout à zéro !
Pompage vient de publier les dernières traductions des excellents tutoriaux « CSS from the Ground Up » de Joe Gillespie, ce qui clôt la série. Un…
Un effet graphique assez répandu, au point d'envahir notamment les interfaces graphiques des différents OS, est celui des ombrages. Les ombres permettent…
Gastero Prod 4, les standards et l'accessibilité
L'accessibilité devient petit à petit incontournable. Outre ses avantages directs en terme d'élargissement d'audience des sites, elle a tendance dans…
See all tags.