Veille de CCM Benchmark Group

Contextual Spacing For Intrinsic Web Design | Modern CSS Solutions

Learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques. We'll construct a starter set of custom properties for gap, margin, and padding.

<moderncss.dev>
By eclergeot - - Intégration
State of CSS 2022

Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.

<web.dev>
By eclergeot - - Intégration
:where() :is() :has()? New CSS selectors that make your life easier | Polypane, The browser for ambitious developers

When people talk about CSS complexity, a major contributor to that is CSS specificity, or writing effective CSS selectors. The more you add to a CSS selector, the more precise it is, but also, the more specific it is, so…

<polypane.app>
By eclergeot - - Intégration
Multi-Colored SVG Symbol Icons with CSS Variables | frontstuff

Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solu...

<frontstuff.io>
By eclergeot - - Intégration
Container Queries | 12 Days of Web

Get ready for this incoming CSS feature that will allow developing components that respond to their container&#39;s width and other properties.

<12daysofweb.dev>
By eclergeot - - Intégration
radio boutons avec background

radio boutons avec background dégradé : <codepen.io>
By eclergeot - - Intégration
By eclergeot - - Intégration
T. Afif @ CSS Challenges on Twitter

“Are you looking for a simple loader? The below collection is for you ???? Demo: https://t.co/bPlLjw3GoU via @CodePen ✅ 1 &lt;div&gt; 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>
By eclergeot - - Intégration
Stefan Judis on Twitter

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

<twitter.com>
By vgrebot - - Intégration
By eclergeot - - Intégration
A Web Developer's Browser

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

Ca a pas l'air mal ça ? <responsively.app>
By dam75 - - Intégration
The new responsive: Web design in a component-driven world

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:
By eclergeot - - Intégration
:root { color-scheme: light da

: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;} }
By florent - - Intégration
:root { color-scheme: light da

: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;} }
By florent - - Intégration
:root { color-scheme: light da

: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;} }
By florent - - Intégration
:root { color-scheme: light da

: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;} }
By florent - - Intégration
```:root { color-scheme: l

```: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); } }```
By ym.leporschauvel - - Intégration
```:root { color-scheme: l

```: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); } }```
By ym.leporschauvel - - Intégration