Using the caret-color property to customize the text cursor in <input>, <textarea> fields or those with contenteditable attribute.
caret-color
<input>
<textarea>
contenteditable
Use the inherit CSS keyword to match text styles to the user's custom browser font settings, enhancing accessibility and user experience.
inherit
font
Using the CSS ::file-selector-button pseudo-element to style the default <input type="file"> natively.
::file-selector-button
<input type="file">
infinity
Using the CSS calc function with the infinity constant, which represents the largest possible value, to create a fully rounded corner button.
calc
Using the @container CSS at-rule to conditionally switch emojis based on container height for responsive content.
@container
Like JS's IntersectionObserver, using CSS to track elements crossing the ScrollPort and applying blurFadeIn animation.
IntersectionObserver
blurFadeIn
Using the experimental CSS feature @container style(), showcasing dynamic styling for different product states (new and popular).
@container style()
Use the CSS aspect-ratio property to consistently create a perfect square, ensuring the element maintains its proportions across different screen sizes.
aspect-ratio
A ready-to-use list of CSS ribbons collection, customizable with CSS variables, can be used in multiple scenarios like badges for promotions, decorative cards and more.
Using margin-inline-end to align a picture to either the left or the right depending on the browser direction (right to left, or left to right).
margin-inline-end
color-mix
Using color-mix to achieve native CSS color mixing, effective for creating color shades from a single base color.
Using the media feature prefers-reduced-transparency to create an accessible article summary card for users with visual impairments who enable the reduced transparency system setting.
prefers-reduced-transparency
reduced transparency
@media
Using CSS scripting @media query scripting: enabled to check whether JavaScript is enabled or not.
scripting: enabled
nth of selector
Using selector:nth-child(nth of selector) to target the nth element matching a specific selector, enabling complex and precise CSS elements selection.
selector:nth-child(nth of selector)
nth
selector
Using the CSS property list-style-type to style <details> disclosure widgets with custom emoji markers.
list-style-type
<details>
Use the appearance property and :checked pseudo-class to create customizable switches with CSS variables for dynamic styling.
appearance
:checked
Use the CSS isolation: isolate property to create a new stacking context, controlling the stacking order of elements on the page.
isolation: isolate
paint
Using the CSS property contain: paint which improves performance by limiting the layout and painting of child elements to the container's dimensions, restricting unnecessary rendering outside its boundaries.
contain: paint
Using the CSS property background-attachment to achieve layered scrolling effects with fixed and dynamic shadows.
background-attachment
Using scroll-snap-type and scroll-snap-align to achieve a vertical scroll snapping to align sections at the top of the viewport, enabling slide-like navigation as users scroll down or top.
scroll-snap-type
scroll-snap-align
Use animation-timeline to create a dynamic reading progress bar, enhancing user engagement by visually tracking their reading progress.
animation-timeline
:is()
Using :is() pseudo-class to regroup the link :hover and :focus states instead of chaining them for an increased readability.
:hover
:focus
Using overscroll-behavior: none to fix nested scrolling issues, ensuring only the targeted element scrolls.
overscroll-behavior: none
Implementing a typewriter effect fully in CSS with animated text and a blinking caret, using custom properties for timing and steps.
unset
Using the unset CSS keyword to reset all properties to their inherited values, including parent and initial values.
Emulate CSS @media features directly in the Chrome DevTools Rendering tab to test responsive design and media queries.
orientation
Using the orientation CSS media feature to test the viewport portrait and landscape orientations.
portrait
landscape
Use the CSS scroll-padding-top property to ensure content isn’t hidden behind fixed headers or elements when scrolling by adding space at the top.
scroll-padding-top
@counter-style
Using the CSS at rule @counter-style to make a new list style type instead of using the predefined one.
Using the CSS :has and :invalid pseudo-classes to check the input's validity then apply a different style.
:has
:invalid
Using the CSS property offset-path to control the placement of a circle along a custom SVG path, and animating the circle to move across the path from start to finish.
offset-path
Using the currentColor CSS value to reduce the code redundancy of an alert user interface that has two states, success and danger
currentColor
alert
success
danger
Using first-letter and first-line CSS pseudo-elements to make a subheading newspaper first letter style.
first-letter
first-line
Explore browser rendering from HTML/CSS to web content. Discover stages from DOM creation to final display.
Using text-wrap: balance to optimally distributes characters for balanced text wrapping, already supported in Chromium browsers.
text-wrap: balance
Use the line-clamp CSS property to truncate text after a specific number of lines, ensuring content fits within a defined space.
line-clamp
Explore a collection of over 500 CSS animation loaders to enhance your website's loading experience with smooth and creative effects.
Using CSS writing-mode to change text direction to horizontal and vertical orientations.
writing-mode
Learn how to use the CSS mix-blend-mode property to control how elements blend with each other and create interesting visual effects.
mix-blend-mode
Using the CSS shape-outside property to define a shape around a content, allowing for more appealing layouts.
shape-outside