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);
}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%). Ref
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;
}Websites to create your own curves:
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 */
}
}
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;
}
body {
min-height: 100vh;
}
img, picture, svg, video {
display: block;
max-width: 100%
}