Jump to navigation

.Properties and Rules

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