CSS Features

Custom Properties

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. CSS variables allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00 , especially if this same color is also used in other contexts.

CSS variables are subject to the cascade and inherit their value from their parent.

Declaring a variable


element {
  --main-bg-color: brown;
}

Using the variable


element {
  background-color: var(--main-bg-color );
}


.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}

.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 150px;
}
  
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

Notice the repetition in the CSS. The background color is set to brown in several places. For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally. For non-trivial projects, this is not always possible. By declaring a variable on the :root pseudo-class, a CSS author can reduce the need for repetition by using the variable.

Example 2



:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}

.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}

.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

Feature Query

The @supports CSS at rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

The @supports at-rule associates a block of statements with a supports condition. The supports condition consists of one or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). Precedence of operators can be defined with parentheses.

In JavaScript, @supports can be accessed via the CSS object model interface CSSSupportsRule.

The most basic supports condition is a simple declaration (a property name followed by a value, separated by a colon). The declaration must be surrounded by parentheses

Example 1


@supports (display: grid) {
  div {
    display: grid;
  }
}

The above example checks to see if the browser support CSS-grid if yes, then the styles will be applied, if no then the block will be ignored.

Example 2


@supports not (display: grid) {
  div {
    float: right;
  }
}

The above example checks to see if the browser does not support CSS-grid if it does not, then the styles will be applied, if it does support CSS-grid then the block will be ignored.

calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:

Addition: +
Subtraction: -
Multiplication (at least one of the arguments must be a number): *
Division (the right-hand side must be a number): /

The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Example 1

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:


.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  background-color: yellow;
  border: 1px solid black;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

Example 2

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.


input {
  padding: 6px;
  width: calc(100% - 1em);
}
  
#formbox {
  padding: 4px;
  width: calc(100% / 6);
}

Media Queries

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries.

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Example 1


/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1.25rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

Box-sizing

The box-sizing CSS property defines how the user agent should calculate the total width and height of an element.

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. The box-sizing property can be used to adjust this behavior:

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Example 1


.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
  Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
  Content box width: 160px
  Content box height: 80px */
}

Example 2


.border-box {
  box-sizing: border-box;
  /* Total width: 160px
  Total height: 80px
  Content box width: 160px - (2 * 20px)
  - (2 * 8px) = 104px
  Content box height: 80px - (2 * 20px)
  - (2 * 8px) = 24px */
}