Matthias Ott
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 web font in the wrong way.
Contents tagged “CSS”
There are 80 contents with this tag:
-
-
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 found their way into the standards process, back into the layers of web technology that move slower and are more resilient.
-
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 have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.
-
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, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.
-
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 we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.
-
Yet another great Utopia tool, this time for grids, but the right way:
-
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 to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.
-
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.
-
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 is not just a “parent selector”. After decades of dead-ends, this selector can do far more.
-
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!
-
💡 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!
-
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 queries and sometimes other dimensions, step by step, with interactive playgrounds.
-
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 later that the cause is something else. How many times have you been there?
-
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!
-
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, classes and data attributes:
-
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
gapwith Flexbox with no fallback means half iOS users won't get the right layout.
Can I Use flexbox-gap? 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/VmwJ4KInloQI 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 as a bug to webkit, and webkit replied it was "intended".
-
Is the
margin-blockCSS 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 other browsers followed… 🤦♂️
-
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.
-
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 how some can be very useful.
-
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!
-
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.
-
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. These solutions generally have the advantage of using less code, thus reducing maintenance efforts for a development team (for example, no need to update the libraries used).
-
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 (find all the templates that are using the CSS selector I want to change).
-
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 that when they say something like “CSS sucks”—what they mean is “CSS sucks for a small subset of less than 1 percent of the web”
-
Full-Bleed Layout Using CSS Grid
Josh shows here beautifully[1] how to use CSS Grid to contain page elements' width and have some expand outside this containment.
-
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.
-
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.
-
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 bellow 320 pixels.
-
Enhancing User Experience With CSS Animations
Another amazing resource from Stéphanie, a detailed transcript of a talk she gave for Shift Remote.
-
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 god, not again” in our heads as that is our baggage and not the one of the web community. We’ve dropped the ball somewhere along the line talking exclusively to a receptive audience instead of moving on with our advocacy into academia, enterprise and education.
-
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, a must read.
-
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.
-
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.
-
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 them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
-
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 15 minutes to watch Miriam Suzanne explain how it came to be, and why it is what it is.
-
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 in most email clients.
-
Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website:
-
Chen Hui Jing helps fix a little issue with overflowing Flexbox containers:
-
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":
-
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 source you can find nowadays.
-
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 at the 5th CSS Conference in Shenzhen on March 30, 2019.
-
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, unless you're fond of CSS and want to experiment with Grid Layout and Quantity Queries.
-
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 cascading sizing, but the most important part here IMHO is the following:
-
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 the intermediary part where you get a pair of elements on one line followed by a longer element underneath.
-
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 a reference document for authors, implementors, and spec authors, to aid in finding the definition for a term hidden somewhere in the haystack of CSS specs.
-
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 meant the bottom of the game interface was partialy hidden behind the browser buttons bar or below the "fold" of some mobile browsers.
-
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 qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.
-
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 un lien vers un site de poker fashion…
-
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 que ce sont plutôt des hordes de développeurs Web qui s'arrachent les cheveux pour qu'ils en aient l'illusion. Alors voilà, j'ai décidé d'aider ses pauvres égarés à revenir dans le droit chemin…
-
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 très vite trollesque, de quoi se régaler.
-
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 personnelle.
-
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 must à lire et relire absolument !
-
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 de donner du relief aux interfaces, principalement pour mettre en évidence la supperposition de différentes « couches » graphiques.
-
Gastero Prod 4, les standards et l'accessibilité
L'accessibilité devient petit à petit incontournable.
Brad Frost
Donnie D'Amato
Trys Mudford
Malte Ubl
Brian Louis Ramirez
Jen Simmons
Hubert Sablonnière
Jim Nielsen
Josh W. Comeau
Ahmad Shadeed
Kev Bonett
Bramus Van Damme
Ryan Mulligan
Jason Grigsby
Maarten Van Hoof
Sarah Dayan
Nils Binder
Xiao Zhuo Jia
Romaric Pascal
Anthony Ricaud
Zach Leatherman
-loud-minority/)
Rachel Andrew
Tyler Sticka
Evan Minto
Stéphanie Walter
Christian Heilmann
Sara Soueidan
Sebastiano Guerriero
Vincent De Oliveira
Amelia Wattenberger
Miriam Suzanne
Rémy Parmentier
Cassie Evans
Chen Hui Jing
Jay Freestone
Cody Lindley
Dave Ceddia
Yuan Chuan
Rob Weychert
Harry Roberts
See all tags.