Amy LeeNov 12, 2023
Ahmad Shadeed has a good example of "defensive CSS": set a minimum button width. https://defensivecss.dev/tip/button-min-width/ #DefensiveCSS #I18n #l10n #CSS #frontend
Defensive CSS - Button minimum width

Practical CSS and design tips that helps in building future-proof user interfaces.

Téotime PacreauOct 15, 2023
Article de @shadeed9 sur l'idée d'avoir un :has(.nav:wrap) pour styler en cas de flex-wrap
https://ishadeed.com/article/flex-wrap-detect/
#flexwrap #CSS #IntrinsicWebDesign #DefensiveCSS #flexbox
Do we need CSS flex-wrap detection?

A look at why we need flex wrapping detection in CSS.

Téotime PacreauFeb 25, 2023
@nicod totalement ! Je te conseille fortement de consulter la démo de @Una
https://codepen.io/una/pen/mdOgyVL . Sur des interfaces à base de cartes ça fonctionne particulièrement bien. Très efficace pour écrire un seul composant qui s'adapte en fonction de son contenu.
#ContainerQueries #DefensiveCSS #ResilientCSS #ResponsiveToTheContainer
Responsive Component Demo — Immediate Parent

...

CodePen
Téotime PacreauFeb 11, 2023

Mixing #ContainerQueries, #Typography, #Clamp and #ContainerQueriesUnits from @fonts → "Our text will never get too big or too small and if a dev throws that paragraph into a sidebar or a card or something then our text will always look good."

"what hundreds of lines of CSS hacks could be cut down to with container queries:
p {
font-size: clamp(1rem, 2.5cqw, 2rem);
line-height: clamp(1.35rem, 3.5cqw, 1.9rem);
}"

https://www.robinrendle.com/notes/container-queries-and-typography/

#CSS #DefensiveCSS #ResilientCSS

Container Queries and Typography

The website of Robin Rendle, a designer and writer from the UK.