Collection of CSS tips
:has()to check for matching siblings. Documentation~: Subsequent-sibling combinator:focus-within. Matches an element if the element or any of its descendants are focused. Documentation:emptyto style component without any content. Video
inset allows to specify top, right, bottom and left with a single CSS line.
Documentation
<body>
<div id="box1"></div>
<div id="box2" anchor="box1"></div>
</body>. {
position: absolute;
bottom: anchor(top);
left: anchor(center);
}Dropdown items positioning example (Video):
Ability to provide scrolling features (carousel, table of content links) without the need for JavaScript:
minmaxclamp, combinewidth,min-widthandmax-widthinto a single commandminmaxstretch(better alternative to100%). Refmin-block-size: 100svh(forbody, to make sure that it uses at least the full page height)
font-size: clamp(1.8rem, calc(10 + 1rem), 5vw);You can use min-width: fit-content; instead of white-space: nowrap;
Reference Video
Can't directly use color: linear-gradient.
Instead we can use this tip:
h1 {
background: linear-gradient(to right, red, blue); /* apply gradient to background */
background-clip: text; /* limit background painting area */
color: transparent; /* make text transparent */
}:root {
counter-reset: headings; /* headings is a name */
}
h2 {
counter-increment: headings; /* increment counter via `counter-increment` */
}
h2:before {
content: counter(headings); /* show the value of the counter prior to the element
}Allows styled counters:
textarea {
field-sizing: content;
}p {
margin-inline: auto;
overflow: hidden;
white-space: nowrap;
dorder-right: 1px solid;
animation: typing 3s steps(22) forwards, blink 1s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100% }
}
@keyframes blink {
50% { border-color: transparent; }
}Websites to create your own curves:
background: conic-gradient (color 100%, transparent 100%);
Snap scrolling:
.wrapper {
display: flex;
gap: 20px;
width: 300px;
overflow-x: scroll;
scroll-snap-type: x mandatory; /* children need to define `scroll-snap-align`. Could also use `proximity` */
.card {
scroll-snap-align: center;
box-sizing: border-box;
flex-shrink: 0;
width: 300px; /* needs to be the same size as the wrapper */
}
}
animation: <name>;
animation-timeline: view();
animation-range: entry 0% cover 40%;
backdrop-filterto control how elements behind will display. Values includeblur,invert,opacity, etc. Documentation- simple hack for blurry image placeholders. Example:
<img src="…" style="--lqip:350819">
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font-inherit;
}
html {
color-scheme: dark light;
scrollbar-gutter: stable;
}
body {
/*min-height: 100vh;*/
min-block-size: 100svh;
}
img, picture, svg, video {
display: block;
max-width: 100%
}