Veille de CCM Benchmark Group

“Are you looking for a simple loader? The below collection is for you ???? Demo: https://t.co/bPlLjw3GoU via @CodePen ✅ 1 <div> per loader ✅ 0 pseudo element ✅ 1 declared gradient per loader ✅ 1 value to control the size ✅ 1 value to control the

amusant de voir cette utilisation des dégradés : <twitter.com>

“Quick HTML tip: I just discovered that `li` elements support a `value` attribute to configure the start of an ordered list.”

<twitter.com>

<sizzy.co|sizzy.co> est assez fourni aussi

A dev-tool that aids faster and precise responsive web development.

Ca a pas l'air mal ça ? <responsively.app>

User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us to usehr in a new era of responsive web design.

<web.dev> Vivement !!! :slightly_smiling_face:

:root { color-scheme: light dark; supported-color-schemes: light dark; } @media (prefers-color-scheme: light dark) { .body {       background-color: #000000 !important; } .td_full_white {background-color:#ffffff !important;} .accroche {color:#ffffff !important;} .sous-accroche {color:#333333 !important;} }

:root { color-scheme: light dark; supported-color-schemes: light dark; } @media (prefers-color-scheme: light dark) { .body {       background-color: #000000 !important; } .td_full_white {background-color:#ffffff !important;} .accroche {color:#ffffff !important;} .sous-accroche {color:#333333 !important;} }

:root { color-scheme: light dark; supported-color-schemes: light dark; } @media (prefers-color-scheme: light dark) { .body {       background-color: #000000 !important; } .td_full_white {background-color:#ffffff !important;} .accroche {color:#ffffff !important;} .sous-accroche {color:#333333 !important;} }

:root { color-scheme: light dark; supported-color-schemes: light dark; } @media (prefers-color-scheme: light dark) { .body {       background-color: #000000 !important; } .td_full_white {background-color:#ffffff !important;} .accroche {color:#ffffff !important;} .sous-accroche {color:#333333 !important;} }

```:root { color-scheme: ligh">light dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark; supported-color-schemes: ligh">light dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark; } @media (prefers-color-scheme: dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark ) { .ligh">lightimage {display: none !important;} .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimageWrapper, .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimage {display: block !important;} .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkmode { background-color: #272623 !important; } .titl">title {color:#eeeeee !important;font-size:18px;text-decoration:none;} .desc">description {color:#eeeeee !important;font-size:12px;font-family:sans-serif;line-height:16px;text-align:justify;} .veil">veille-actu {color:#eeeeee !important;} img { filter: brightness(.9) contrast(1.2); } [data-ogsc] .ligh">lightimage {display: none !important;} [data-ogsc] .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimageWrapper, .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimage {display: block !important;} [data-ogsc] .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkmode { background-color: #272623 !important; } [data-ogsc] .titl">title {color:#eeeeee !important;font-size:18px;text-decoration:none;} [data-ogsc] .desc">description {color:#eeeeee !important;font-size:12px;font-family:sans-serif;line-height:16px;text-align:justify;} [data-ogsc] .veil">veille-actu {color:#eeeeee !important;} [data-ogsc] img { filter: brightness(.9) contrast(1.2); } }```

```:root { color-scheme: ligh">light dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark; supported-color-schemes: ligh">light dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark; } @media (prefers-color-scheme: dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark ) { .ligh">lightimage {display: none !important;} .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimageWrapper, .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimage {display: block !important;} .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkmode { background-color: #272623 !important; } .titl">title {color:#eeeeee !important;font-size:18px;text-decoration:none;} .desc">description {color:#eeeeee !important;font-size:12px;font-family:sans-serif;line-height:16px;text-align:justify;} .veil">veille-actu {color:#eeeeee !important;} img { filter: brightness(.9) contrast(1.2); } [data-ogsc] .ligh">lightimage {display: none !important;} [data-ogsc] .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimageWrapper, .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkimage {display: block !important;} [data-ogsc] .dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">dark">darkmode { background-color: #272623 !important; } [data-ogsc] .titl">title {color:#eeeeee !important;font-size:18px;text-decoration:none;} [data-ogsc] .desc">description {color:#eeeeee !important;font-size:12px;font-family:sans-serif;line-height:16px;text-align:justify;} [data-ogsc] .veil">veille-actu {color:#eeeeee !important;} [data-ogsc] img { filter: brightness(.9) contrast(1.2); } }```

un petit outil sympa quand on a un doute : <caninclude.glitch.me>

The CSS image-set() function has been supported in Chromium-based browsers since 2012 and in Safari since version 6. Support recently landed in Firefox

<css-tricks.com>

<nicolas-hoizey.com>

Atomic Design is a Storybook like made for Symfony and Twig - qmachard/atomic-design-bundle

<github.com>

Âmes sensibles, s’abstenir ! >

The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to theme-specific defaults of the user agent stylesheet, such as, for example, form controls, scroll bars, as well as CSS system colors. At the same time,

<web.dev> suis invité à une réu cab sur l'application systématique du darktheme donc j'imagine que ça ne va pas tarder à arriver en prod dans chrome.. pour rappel il s'agira non seulement d'un darktheme de l'ui mais aussi d'une application sur les pages de tt les sites via un algo .. ça vaudrait ptet le coup de vérifier ce que ça donne sur nos sites (il y a un flag chrome déjà dispo pour), non ? l'un de vous a déjà testé peut être ?

Dessiner en css, plus pour la beauté du geste et l’intérêt technique que parce que le css est la meilleure techno pour ça. Plutôt amusant ! >

j'adore cette illustration du RWD : <twitter.com>

:open_mouth: <twitter.com>