https://css-tricks.com/lets-look-50-interesting-css-properties-values/
Quelques trucs que je retiens pour moi :
`
body {
counter-reset: heading; /* init the counter for headings (you can give it any other name) /
}
h2 {
counter-increment: heading; / increments the counter on every tag /
counter-reset: subheading; / here we init or reset the subheading /
/ so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 /
}
h2:before {
content: counter(heading) " - "; / using :before selector and counter() function we can add the index to the heading /
}
h3 {
counter-increment: subheading; / increment the subheading counter on every tag */
}
h3:before {
content: counter(heading) "." counter(subheading) " - ";
}
`
`
.parent {
color: #ccc;
border: 1px solid currentColor;
}
.child {
background: currentColor;
}
`
`
.pixelated {
-webkit-image-rendering: pixelated;
image-rendering: pixelated;
}
img {
width: 200px;
height: 200px;
}
`
`
.-shape-outside {
shape-outside: circle(50%);
float: left;
}
.circle {
width: 160px;
height: 160px;
background-color: #fff;
border-radius: 50%;
margin-right: 24px;
overflow: hidden;
border: 1px solid #eee;
img {
width: 100%;
height: 100%;
}
}
div {
text-align: justify;
}
html, body {
height: auto;
}
`
`
@supports (display: grid) {
.container {
display: grid;
}
}
@supports (image-rendering) {
img {
image-rendering: pixelated;
}
}
@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {
}
`
`
:root {
--primary-color: #cccccc;
}
body {
color: var(--primary-color, #cccccc);/* le second est le fallback */
}
`
These values are used for sizing things relative to the viewport size. While width is alwasys relative to the parent container, vh or vw always use viewport size as a basis.
For a browser window that has a viewport 1280x655px, 1vh is equal to 6.55 pixels, 1vw is equal to 12.8pixels, vmin is 6.55 pixels (smallest of the two values), and vmax is 12.8 pixels (largest of the two values).
`
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
`
Source image
repost automatique de mon site...