Jump to navigation

.Properties and Rules

Content Visibility

The content-visibility CSS property allows us to postpone the rendering of HTML elements, avoiding rendering the page as a whole. AUTO detects whether an element is within the viewport of the user and skips the rendering for the elements that haven’t yet enter the viewport yet.

  content-visibility: auto;

  // If you don't have a height on your content
  contain-intrinsic-size: 240px;


Useful for pages which is adding content to the DOM after load. You can tell the browser which elements are considered indpendant of the document tree. This can improve performance with calculations in layout, style, paint, size, or any combination for a limited area of the DOM and not the entire page.

/* no containment on element */
contain: none;

/* The browser knows that nothing outside the element can affect the internal layout, and nothing from inside the element can change anything about the layout of things outside it. Acts as if you had used position: relative */
contain: layout;

/* Indicate to the browser that elements inside the containing block will not be visible outside of the bounds of that box. Acts as if you had used overflow: hidden */
contain: paint;

/* Telling the browser that you know the size of the box and it is not going to change */
contain: size;

/* combines layout and paint */
contain: content;

/* combines layout, paint, and size */
contain: strict;

Scroll Margin Top

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport.

/* 1rem is required to ensure the link sits under the fixed header */
.link {
 scroll-margin-top: 1em;

Line Clamp

The line-clamp property truncates text at a specific number of lines. The following will show three lines and then ...

.box p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;

text-overflow: ellipsis; can also be used for single line usage. But Line Clamp allows us to pick which line

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;

Types of @media

Selects a the form when one of its descendants is focused.

  • all - Default. Used for all media type devices
  • print - Used for printers
  • screen - Used for computer screens, tablets, smart-phones etc.
  • speech - Used for screenreaders that "reads" the page out loud