CSS | MDN

Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
▻https://stripesgenerator.com

Générateur de rayures en background-image « pure CSS »

Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient

#rayure #générateur #background-image #css

Redimensionnement d’arrière-plans SVG - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds

Règles de redimensionnement des fichiers SVG en background-image

#SVG #background-image #background-size

Reducing The Need For Pseudo-Elements — Smashing Magazine
▻https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements

https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9180b600-6062-410f-ac44-44f11e67d0f4/angle-arrow-anatomy-01.png

For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave #pseudo-elements behind in some scenarios, thanks to newer #CSS properties. Pseudo-elements still have a place. This article is not “never use pseudo-elements” but rather “we no longer have to use pseudo-elements as much”. We can style a number of popular user interface elements without the need for pseudo-elements. By relying less on pseudo-elements, we can write less CSS, eliminate nested elements, ignore stacking context issues, and forget about positioning.

Quelques cas pratiques sympas cf : #Angled Buttons, Button Wipes, Tiles With Screen Color #Overlays

clamp() - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/clamp()

La fonction CSS clamp() permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> peut être utilisée.

#clamp #css #calcul #maximum_minimum

La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries

#javascript #media_query #matchMedia

Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

#CSS #grid #flexbox #layout

Va falloir jouer avec cette nouvelle #media_query : prefers-color-scheme - #CSS
▻https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l’utilisateur quant au thème à utiliser (sombre ou clair).

Si je comprends bien, ça vient d’être intégré dans Safari de MacOS 10.4.4, pas encore testé. Il va falloir tester si c’est pris en compte dans les webviews des apps iOS, là où ça me semble le plus directement utile.

New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn