9 Lesser-Known CSS Properties
Elevate your CSS game: Unleash the power of these overlooked properties to optimize your styling.
While many developers are familiar with popular CSS properties, there are some lesser-known properties that you might have overlooked. In this article, we’ll explore 10 CSS properties that you probably haven’t used.
1. gap
The gap
property is a convenient way to specify the spacing between grid or flexbox items without the need for additional margin or padding properties. It simplifies the creation of grid-based or flexbox layouts by providing a shorthand for setting the gaps between grid or flex items in both rows and columns.
To understand the gap
property, let's look at its usage in the context of grids and flexbox separately.
Gap in Grid Layouts
In grid layouts, the gap
property sets the spacing between grid items, both horizontally and vertically. It allows you to control the gap between rows and columns in a single declaration.
The syntax for setting the gap in grid layouts is as follows:
.container {
display: grid;
gap: <row-gap> <column-gap>;
}
The <row-gap>
and <column-gap>
values represent the spacing between rows and columns, respectively. You can use any valid CSS length value or a keyword like normal
to define the gap. If only one value is specified, it applies to both rows and columns.
Here’s an example that sets a grid container with a 20-pixel gap between rows and a 10-pixel gap between columns:
.container {
display: grid;
gap: 20px 10px;
}
With this CSS, the grid items within the container will have the specified gaps between rows and columns, creating a visually appealing layout.
Gap in Flexbox Layouts
In flexbox layouts, the gap
property sets the spacing between flex items along the main axis, which is typically horizontal. It simplifies the process of creating flexible and evenly-spaced layouts.
The syntax for setting the gap in flexbox layouts is as follows:
.container {
display: flex;
gap: <gap-size>;
}
The <gap-size>
value represents the spacing between flex items. You can use any valid CSS length value or a keyword like normal
to define the gap.
Here’s an example that sets a flex container with a 10-pixel gap between flex items:
.container {
display: flex;
gap: 10px;
}
With this CSS, the flex items within the container will have a 10-pixel gap between them along the main axis, creating a visually pleasing and evenly spaced layout.
2. font-display
One often overlooked aspect of web development is the loading and rendering of custom fonts. The font-display
property allows you to control how a downloadable font renders before it is fully loaded or in the case of download failure.
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: swap;
}
By using font-display
in a @font-face
declaration, you can control how fonts display with a simple CSS line. This eliminates the need for complex JavaScript workarounds. The property offers five values to choose from:
auto
: This is the default value, and it behaves as if the property is not used. The browser hides the text using custom fonts until they finish loading, then displays the text.block
: With this value, the browser reduces the time it hides the text while waiting for the custom font to load, allowing a fallback font to be displayed more promptly. However, the browser will indefinitely wait for the custom font and swap it as soon as it becomes available.swap
: This is the most common value to use. It immediately shows the fallback text while the custom font loads. Once the custom font is ready, it replaces the fallback font. This behavior aligns with JavaScript-based solutions used in the past.fallback
: With this value, there will be a brief period of invisible text while waiting for the custom font. If the custom font isn't ready within a certain time (around 100ms), the fallback font is used. However, if too much time passes, the fallback font will be used for the remainder of the page's lifetime.optional
: Similar tofallback
, this value also has a short period of invisible text, followed by the fallback font if the custom font isn't ready. The difference is that withoptional
, the browser has the freedom to decide whether or not to download and use the font. This can be useful for non-essential fonts or when catering to users on slow connections.
3. backdrop-filter
The backdrop-filter
property allows you to apply graphical effects to the area behind an element, commonly known as the backdrop. It opens up new possibilities for creating visually appealing designs by adding blurs, color adjustments, and other filter effects to the background of an element.
The syntax for the backdrop-filter
property is as follows:
.element {
backdrop-filter: <filter-effects>;
}
The <filter-effects>
value represents the specific graphical effects to be applied to the backdrop. You can use a variety of filter functions, such as blur()
, brightness()
, saturate()
, and more, to create different visual effects.
Here’s an example that applies a blur effect to the backdrop of an element:
.element {
backdrop-filter: blur(10px);
}
With this CSS, the background behind the element will be blurred by 10 pixels, creating a visually appealing effect.
4. scroll-snap
The scroll-snap
property is designed to enhance scrolling experiences by allowing content to snap into a specific position after scrolling. It provides a way to create smooth and precise scrolling behavior, particularly in situations where scrolling through a series of items or sections is required.
The scroll-snap
property has various sub-properties that control different aspects of scrolling behavior. Here, we'll cover the most commonly used ones: scroll-snap-type
and scroll-snap-align
.
scroll-snap-type
The scroll-snap-type
property sets the snapping behavior for a scroll container. It determines whether the container should snap to specific positions during scrolling and in what direction.
The syntax for the scroll-snap-type
property is as follows:
.container {
scroll-snap-type: <behavior> <axes>;
}
The <behavior>
value specifies the snapping behavior and can be set to one of the following options:
none
: No snapping behavior is applied.mandatory
: The container snaps to the nearest snap point, ensuring that there is always a snapped position during scrolling.proximity
: The container snaps to the nearest snap point if the scrolling motion stops within a specific threshold.
The <axes>
value defines the scroll axes to which the snapping behavior should be applied and can be set to one of the following options:
none
: No snapping behavior is applied to any axis.both
: Snapping behavior is applied to both the horizontal and vertical axes.block
: Snapping behavior is applied to the block axis (vertical scrolling).inline
: Snapping behavior is applied to the inline axis (horizontal scrolling).
Here’s an example that sets a container to snap to specific positions both horizontally and vertically:
.container {
scroll-snap-type: mandatory both;
}
With this CSS, the container will snap to the nearest snap point during scrolling, ensuring a smooth and precise scrolling experience in both directions.
scroll-snap-align
The scroll-snap-align
property controls the alignment of snapped positions within a scroll container. It determines how the scroll container aligns to the snap points when scrolling stops.
The syntax for the scroll-snap-align
property is as follows:
.element {
scroll-snap-align: <alignment>;
}
The <alignment>
value specifies the alignment behavior and can be set to one of the following options:
none
: No alignment is applied to snapped positions.start
: The scroll container aligns the snap positions to the start of the container.end
: The scroll container aligns the snap positions to the end of the container.center
: The scroll container aligns the snap positions to the center of the container.
Here’s an example that aligns snapped positions to the start of a scroll container:
.container {
scroll-snap-align: start;
}
With this CSS, when scrolling stops, the scroll container will align the snapped positions to the start of the container.
The scroll-snap
property provides a powerful way to enhance scrolling experiences and create intuitive navigation through sections or items.
5. contain
The contain
property is a valuable tool for optimizing web pages, especially those with complex layouts or numerous widgets. It allows you to limit the scope of styles, layout, and paint recalculation to specific parts of the DOM, enhancing performance and minimizing unnecessary rendering work.
With contain
, you can indicate that an element and its contents should be as independent as possible from the rest of the document tree. By scoping the browser's recalculation, you can reduce calculations and improve performance. This property is particularly useful when working with Web Components and React components, where containment can help isolate the impact of changes. It offers several values:
none
: This is the default value, where no containment effects are applied.size
: Enabling size containment means the element can be sized without the need to examine its descendants, optimizing layout calculations.layout
: By enabling layout containment, you specify that nothing outside the element can affect its internal layout, and vice versa.style
: This value turns on style containment, preventing properties that can have an effect on elements beyond the container from affecting it. This enhances the isolation of styles.paint
: Enabling paint containment ensures that descendants of the container don't display outside its boundaries. This is particularly useful for off-screen or invisible elements like mobile menus.strict
: This value combines all forms of containment except fornone
(contain: size layout style paint
), providing comprehensive containment.content
: Similar tostrict
, but withoutsize
, this value combines all other containment values except for size.
Here’s an example of using the contain
property:
.container {
contain: strict;
}
It’s important to note that browser support for contain
is still limited, and each browser's implementation may have partial support.
6. conic-gradient
The conic-gradient
function is a powerful addition to CSS that allows you to create circular gradients with ease. It provides a way to define gradients that radiate from a central point in a circular or conical shape, opening up new possibilities for creating visually striking designs.
The syntax for the conic-gradient
function is as follows:
.element {
background-image: conic-gradient(<angle>, <color-stop-1>, <color-stop-2>, ...);
}
The <angle>
value represents the starting angle of the gradient, measured in degrees or radians. It defines the direction from which the colors radiate. The <color-stop>
values specify the colors and their positions along the gradient.
Here’s an example that creates a conic gradient that starts from the top and rotates clockwise:
.element {
background-image: conic-gradient(0deg, red, blue, green);
}
With this CSS, the element will have a conic gradient that starts with red at the top, transitions to blue, and then green, forming a circular gradient pattern.
You can also use color stops to define specific positions for each color in the gradient. Here’s an example that creates a conic gradient with color stops:
.element {
background-image: conic-gradient(red 0%, blue 50%, green 100%);
}
In this case, the gradient starts with red at 0%, transitions to blue at 50%, and ends with green at 100%.
The conic-gradient
function allows for more complex gradient patterns by defining multiple color stops and specifying different angles. Experimenting with different angles and color combinations can result in visually stunning effects.
7. clip-path
The clip-path
property allows you to create unique shapes and apply clipping to elements. While commonly used with images, it can be used creatively with other elements, such as paragraphs, to display only a portion of the content. With clip-path
, you have the power to hide specific areas of an element and create visually striking designs.
The syntax of the clip-path
property is as follows:
.element {
clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;
}
The values have the following meanings:
clip-source
: A URL referencing an internal or external SVG<clipPath>
element.basic-shape
: A basic shape function defined in the CSS Shapes specification.geometry-box
: Used in combination with a<basic-shape>
, it provides the reference box for the basic shape.none
: No clipping is applied.
If you’re looking for an interactive tool to experiment with clip-path
, check out clippy, which allows you to play around with different shapes and generate corresponding CSS code.
8. writing-mode
The writing-mode
property allows you to control how lines of text are laid out—whether horizontally or vertically—and the direction in which blocks progress. While not a brand-new property, it's still unfamiliar to many developers. It's worth exploring as it provides flexibility in text layout, particularly when working with languages that require vertical or sideways writing.
The writing-mode
property supports the following values:
horizontal-tb
: Content flows horizontally from left to right and vertically from top to bottom. The next horizontal line is positioned below the previous line.vertical-rl
: Content flows vertically from top to bottom and horizontally from right to left. The next vertical line is positioned to the left of the previous line.vertical-lr
: Content flows vertically from top to bottom and horizontally from left to right. The next vertical line is positioned to the right of the previous line.sideways-rl
: Content flows vertically from top to bottom, and all glyphs, even those in vertical scripts, are set sideways toward the right.sideways-lr
: Content flows vertically from top to bottom, and all glyphs, even those in vertical scripts, are set sideways toward the left.
The last two values are currently only supported by Firefox.
It’s essential to note that the impact of writing-mode
may not be immediately apparent in languages like English, but it becomes more significant when working with languages that require vertical or sideways orientation. To gain a comprehensive understanding of the property, it's recommended to experiment with different languages and text layouts.
Here’s an example to illustrate how the writing-mode
property works:
.container {
writing-mode: vertical-rl;
}
By applying writing-mode: vertical-rl
to a container element, the content within that element will flow vertically from top to bottom, and the glyphs will be set sideways toward the right. This property can be useful for creating unique and visually appealing designs, especially in contexts where vertical or sideways text is required.
9. aspect-ratio
The aspect-ratio
property is a relatively new addition to CSS that allows you to control the aspect ratio of an element. It provides a straightforward way to ensure that an element maintains a specific width-to-height ratio, regardless of its content or the size of the viewport.
Setting the aspect ratio of an element can be particularly useful when dealing with responsive designs or when you want to maintain a specific visual proportion. For example, you may want to create a container for images that always maintains a 16:9 aspect ratio, ensuring that the images display correctly regardless of their original dimensions.
The syntax of the aspect-ratio
property is simple:
.element {
aspect-ratio: <width> / <height>;
}
The <width>
and <height>
values represent the desired aspect ratio of the element. You can use any valid CSS length value for both the width and height. The aspect ratio can be expressed as a decimal, fraction, or percentage.
Here’s an example that sets a container to a 16:9 aspect ratio:
.container {
aspect-ratio: 16 / 9;
}
By applying this CSS, the container will always maintain a 16:9 aspect ratio, regardless of its content or the viewport size. This is particularly useful when working with responsive designs, where elements need to adapt to different screen sizes while preserving their aspect ratios.
Conclusion
Incorporating these lesser-known CSS properties into your projects will not only expand your knowledge but also provide you with additional tools to create remarkable designs and optimize performance.
Remember, when using these properties, it’s essential to consider browser support and potential cross-browser issues. Always check the compatibility of these properties using tools like “Can I use” to ensure a consistent experience across different browsers.
Thanks for reading! Love these stories? Support me with a membership for monthly handpicked articles. Or join Medium via my link.