CSS Houdini
Use CSS Houdini APIs (such as Paint API, Properties & Values API, etc.) to write low-level graphics rendering and custom CSS properties. It is still in the experimental stage, but provides more access to the underlying CSS
<div id="custom-shape"></div>
<script>
CSS.paintWorklet.addModule('paint-worklet.js');
</script>// paint-worklet.js
registerPaint('customShape', class {
paint(ctx, geom, properties) {
ctx.fillStyle = properties.get('--color');
ctx.beginPath();
ctx.arc(geom.width / 2, geom.height / 2, geom.width / 4, 0, Math.PI * 2);
ctx.fill();
}
});#custom-shape {
width: 100px;
height: 100px;
background-image: paint(customShape);
--color: #007bff;
}In this example, we create a custom drawing function using the CSS Paint API (part of the Paint Worklet). paint-worklet.js defines a canvas called customShape that draws a circle on the background of the element. In CSS, the #custom-shape element uses paint(customShape) as the background image and controls the color of the drawing through the CSS variable --color.
To use CSS Houdini, you need to make sure your target browsers support the relevant APIs and may need to enable experimental web platform features in the developer settings. Since these APIs are still under development, cross-browser compatibility may be limited. When used in a production environment, it is recommended to use polyfills or conditional statements to handle unsupported browsers.
CSS Custom Properties (Variables)
Implement global or local style variables for unified style management and dynamic adjustment.
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.button {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: 10px 20px;
border: none;
border-radius: 5px;
}
/* Dynamically changing variable values */
button:hover {
--primary-color: #0056b3;
}In the example above, the :root selector defines two global CSS variables --primary-color and --secondary-color. The .button component uses these variables to define its color. When the mouse hovers over the button, the pseudo-class button:hover dynamically changes the value of --primary-color to achieve the effect of color change.
Advanced usage of CSS Selectors
CSS Selectors provide a powerful way to precisely select and manipulate DOM elements. Here are some advanced selector usages, including :nth-child, :not, and the experimental :has(), and their application in practical scenarios.
1. :nth-child()
The :nth-child() selector allows you to select elements with a specific index position. It can accept an expression such as a number, an even number 2n, an odd number 2n+1, or a formula an+b.
/* Selects all even-numbered child elements of the parent element */
.parent > div:nth-child(2n) {
background-color: lightblue;
}
/* Selects the third child element of its parent */
.parent > div:nth-child(3) {
font-weight: bold;
}2. :not()
:not()Selectors are used to exclude elements that match a specific selector.
/* Select all p elements that are not of class "highlight" */
p:not(.highlight) {
color: gray;
}
/* Selects links that are not a elements */
a:not(a) {
text-decoration: underline;
}3. :has() (experimental)
:has() is an experimental selector that is currently available in some browsers (such as Firefox), but not supported by all browsers. It allows selecting parent elements that contain specific child elements.
/* Selects ul elements that contain li elements with class "open" */
ul:has(li.open) {
border: 2px solid red;
}
/* Note: This selector may require the use of a CSS preprocessor or feature detection to be implemented in some browsers */Code analysis example:
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li class="open"><a href="#">Contact</a></li>
</ul>/* Select inactive links in the menu */
.menu a:not(.active) {
color: #666;
}
/* Select the activated li element in the menu */
.menu li.active {
background-color: #f0f0f0;
}
/* Select the menu with open subitems */
.menu:has(li.open) {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}Visual and filter effects
Filters
Such as blur, brightness, contrast, drop-shadow, hue-rotate, etc., are used for visual effects processing of images and non-image elements.
CSS Filter properties can be applied to the element itself to apply visual effects to the content of the element, such as blur, grayscale, saturation adjustment, etc.
/* Apply filter effect */
.image {
filter: grayscale(50%) contrast(120%);
/* More filter options, for example:
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
*/
}Backdrop Filters
Backdrop Filters is a relatively new CSS feature that allows filter effects to be applied to the background of an element, rather than the content of the element itself. This feature was first introduced in Safari 9 and is gradually being supported by other browsers.
/* Use Backdrop Filter to blur the element background */
.element {
backdrop-filter: blur(10px);
/* More filter options, for example:
backdrop-filter: saturate(1.5) brightness(90%) contrast(120%);
*/
/* To prevent the content from being blurred, you can set an inner shadow */
box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.8);
}Clipping & Masking
Use clip-path (including SVG path), mask-image, etc. to achieve complex clipping and masking effects.
Clipping
Use the clip-path property to clip the displayed part of the element.
/* Use SVG paths to clip elements */
.shape {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
/* Or use simple shapes such as circles and rectangles */
/* clip-path: circle(50% at 50% 50%); */
}Masking CSS Masking
Use the mask property to hide parts of an element, usually related to SVG.
/* Create a mask using SVG data */
.masked-element {
-webkit-mask: url(#mask-image) no-repeat center center / contain;
mask: url(#mask-image) no-repeat center center / contain;
}<!-- SVG Definition -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<mask id="mask-image">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<circle cx="50" cy="50" r="40" fill="black"/>
</mask>
</defs>
</svg>
