#CSS Logical Properties and Values | CSS-Tricks - CSS-Tricks
▻https://css-tricks.com/css-logical-properties-and-values
Now that cross-browser support is at a tipping point, it’s a good time to take a look at #logical_properties and values. If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re not, there are still some convenient new shorthands it’s worth knowing about.
GitHub - unocss/unocss : The instant on-demand atomic CSS engine.
▻https://github.com/unocss/unocss#scanning
Un générateur de styles CSS « atomiques » pour construire son framework CSS : les style sont générés à partir d’un ensemble configurable d’éléments ("presets") : reset, typo, icones, animations...
Les classes sont générés à la demande = si elles sont utilisées dans le code (HTML, JS...) du projet.
Présentation du concept et des principes de fonctionnement : ▻https://antfu.me/posts/reimagine-atomic-css
UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.
[...]
The main goals of UnoCSS are intuitiveness and customization. It allows you to define your own utilities literally in seconds.
Livré avec un ensemble de presets « officiels » (tirés de Tailwind ou Bootstrap entre autre) + contributions disponible sur ▻https://github.com/unocss/unocss#community-presets
Inclus de nombreux utilitaires (shortcuts, themes...) et outils complémentaires (scanner, inspecteur...)
Documentation des classes générées par les presets « officiels » : ▻https://uno.antfu.me
Sur le concept de CSS atomique voir : ▻https://css-tricks.com/lets-define-exactly-atomic-css
J’ai vraiment du mal à comprendre cette mode (plutôt très récente) du CSS atomique. Quand je vois 99% des exemples ça fait exactement ce que le CSS a permis de rejeter depuis 20 ans, cad la présentation dans le HTML : <center> <blink> <table> de présentation avec toutes les marges en dur dans le code, etc. Tout ce qui a été honnis (avec raison !) pendant des années.
<div h-full text-center flex select-none all:transition-400>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
unocss
</div>
<div op30 text-lg fw300 m1>
The instant on-demand Atomic CSS engine.
</div>
<div m2 flex justify-center text-2xl op30 hover="op80">
<a
i-carbon-logo-github
text-inherit
href="https://github.com/unocss/unocss"
target="_blank"
></a>
</div>
</div>
</div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
on-demand · instant · fully customizable
</div>
«Build, Ship, & Maintain Design Systems with Backlight» by (sponsored) Chris Coyier / CSS Tricks, 18.01.2022
▻https://css-tricks.com/design-systems-with-backlight
« Design systems are an entire job these days. Agencies are hired to create them. In-house teams are formed to handle them, shipping them so that other teams can use them and helping ensure they do. Design systems aren’t a fad, they are a positive evolution of how digital design is done. Backlight is the ultimate all-in-one development tool for design systems.
I think it’s interesting to start thinking about this at the end. What’s the best-case scenario for a design system for websites? I think it’s when you’ve published a versioned design system to npm. That way teams can pull it in as a dependency on the project and use it. How do you do that? Your design system is on GitHub and you publish from there. How do you do that? You work on your design system through a development environment that pushes to GitHub. What is Backlight? It’s that development environment. »
5 Accessibility Quick Wins | CSS-Tricks - CSS-Tricks
▻https://css-tricks.com/5-accessibility-quick-wins-you-can-implement-today
5 astuces pour améliorer l’accessibilité d’un site web
Responsive and #fluid_typography, the easy way
▻https://codepen.io/renevanderlende/details/YzEaKvO
:root { font-size: calc(0.658vmin + 0.75rem) }
Sur le même sujet j’ai aussi vu passer ▻https://piperhaywood.com/fluid-type-sizes-and-spacing & ▻https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing qui proposent des solutions « un peu plus complexes ».
Et une autre ressource sur le sujet à base de css clamp :
▻https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp
L’auteur a fait un outil pour tester et jouer avec les valeurs à utiliser ▻https://modern-fluid-typography.vercel.app
A Clever #Sticky #Footer Technique | CSS-Tricks
▻https://css-tricks.com/a-clever-sticky-footer-technique
▻https://css-tricks.com/wp-json/social-image-generator/v1/image/357053
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}#css
«Styling in the Shadow DOM With CSS Shadow Parts» by Ollie Williams, 13.04.2020
▻https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts
«Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
▻https://css-tricks.com/next-gen-css-container
« […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.
Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »
ça fait tellement d’année qu’on attend ça…
#CSS #intégration #web #responsive
How to Favicon in 2021 | CSS-Tricks
▻https://css-tricks.com/how-to-favicon-in-2021
via @brice
#html #intégration #web #favicon
Responsive Data Tables | CSS-Tricks
▻https://css-tricks.com/responsive-data-tables
Une astuce en CSS pour rendre les tableaux HTML de données responsives (spoiler : utilise des ::before)
ping @tofulm :)
touch-action
▻https://css-tricks.com/almanac/properties/t/touch-action
The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen, touch-action will come in handy.
[…]
By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting touch-action to none will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: touch-action: pan-x pan-y;.
How to Section Your HTML
▻https://css-tricks.com/how-to-section-your-html
The sectioning elements in #HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.
Using SVG | CSS-Tricks
►https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
CSS Grid in IE : CSS Grid and the New Autoprefixer | CSS-Tricks
▻https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer
Utilisation des propriétés CSS3 grid avec Internet Explorer : les adaptations/contournements apportés par Autoprefixer et les propriétés vraiment pas supportées.
Voir aussi :
– le repo d’autoprefixer ▻https://github.com/postcss/autoprefixer (Gulp / Grunt / js autonome...)
– le repo de html-autoprefixer pour les CSS inline : ▻https://github.com/RebelMail/html-autoprefixer
Browser Detection is Bad
▻https://css-tricks.com/browser-detection-is-bad
“The whole reason that web standards exist is so that we don’t have to write specific code for specific environments. We should write code that adheres to established standards and software in charge of displaying our code should display it as the standards dictate.”
The Different Ways of Getting SVG Out of Adobe Illustrator | CSS-Tricks
▻https://css-tricks.com/illustrator-to-svg
Pour tous les infographistes qui tentent de sortir du SVG pour le web avec Illustrator et te refilent des trucs abominablement inadaptés...
Code Review Etiquette | CSS-Tricks
▻https://css-tricks.com/code-review-etiquette
Code is logical in nature. It is easy to pinpoint code that is incorrect or could be improved, just like it is easy to notice spelling misteaks. The human condition, when looking at and discussing logical things (like code), is to disregard the feelings of other people. This causes feelings to get hurt and a loss of focus on learning and collaboration.
Improving code review etiquette, because of the human condition, is difficult! Here is a quick list of things that I’ve done, said, seen, or received, that are easy wins in the art of Code Review Etiquette.
Design Considerations: Text on Images
▻https://css-tricks.com/design-considerations-text-images
#Image_CSS_overlay_text_Design
Does CSS Grid Replace Flexbox? | CSS-Tricks
▻https://css-tricks.com/css-grid-replace-flexbox
No. Well. Mostly No.
#Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.
To put a point on it:
Grid can do things Flexbox can’t do.
Flexbox can do things Grid can’t do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
Musings on HTTP/2 and Bundling
▻https://css-tricks.com/musings-on-http2-and-bundling
“If you move your HTTP/1-optimized site to an HTTP/2 host and change nothing in your client-side architecture, it’s not going to be a big deal.”