New Features of CSS3 that you should learn

Share

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Features of CSS:

  • Enable the separation of presentation and content, including layout, colors and fonts.
  • Provides content accessibility,flexibility and control in the specification of presentation characteristics.
  • Enable multiple webpages to share formatting.
  • Reduces complexity and repetition in the structural content.

What is CSS 3?
The latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of new features and additions, like rounded corners, shadows, gradients, transitions, or animations, as well as new layouts like multi-columns, flexible box, or grid layouts.

5 new Features of CSS3:

1.CSS Subgrid

CSS Grid is a flexible layout module that allows developers to create complicated layouts without using JavaScript or resorting to messy CSS hacks.

Grid layout to HTML element

Grid properties:

We can add the child elements of .grid-container i.e. the grid items and they will be laid out according to the rules we define with the grid-template-columns  and grid-template-rows  properties:

CSS grid layout of the above code.

CSS subgrid is available in CSS3 to include grandchildren element of .grid-container in the grid layout

As you can see, subgrid is not a standalone CSS property, but a value you can add to the grid-template-columns and grid-template-rows properties. It makes the children of .grid-item included in the grid layout:

Browser Support

Browser support for CSS subgrid specifications are:

  • Firefox 71+
  • Chromium(open-source broswer for Chrome,Opera,Brave

2. CSS3 Selectors

Selectors are at the heart of CSS. Originally, CSS allowed the matching of elements by type, class, and/or ID. CSS2.1 added pseudo-elements, pseudo-classes, and combinators. These allow for matching elements based on their attributes. CSS3 expands upon those attribute selectors. With CSS3, we can target almost any element on the page with a wide range of selectors.

CSS2 introduced several attribute selectors. Three more attribute selectors were added in CSS3; they allow for substring selection.

Matches any element E whose attribute attr starts with the value val.
Matches any element E whose attribute attr ends in val

Matches any element E whose attribute attr matches val anywhere within the attribute.

Pseudo-classes

:root selector is added as pseudo-class selectors in CSS3. This allows designers to point to the root element of a document. It allows a designer to select the root element of an XML document without necessarily knowing its name. To permit scrollbars when needed in a document, this rule would work.

As a complement to the:first-child selector, the:last-child was added. With it, one can select the last element named a parent element. For a site with articles contained in <div class=’article’></div> tags, where each has the last paragraph with some information that needs to be uniformly stylized, this rule would change the font for the last paragraph of each article.

3. Multiple Background Image

In CSS3, we can add background elements without including elements for each and every background image. CSS3 has added a new feature that provides us with the ability to add more than one background image to any element, even to pseudo-elements.

4. Linear Gradients

W3C added the syntax for generating linear gradients with CSS3.

Syntax: background: linear-gradient(direction, color-stop1, color-stop2, …);

Linear Gradient: Left to right

5. Scroll Snap

Scroll snapping gives you the option to lock the user’s viewport to certain parts or elements of your site. It is very useful to create cool transitions and help users focus on the most important page elements while scrolling down the page. 

All we need to do is to apply scroll snapping to a container and define where its children should snap to.

Conclusively, these are some of the cool features added by the World Wide Web Consortium (W3C) in CSS3 that provide content accessibility, flexibility, and control in the specification of presentation characteristics.

We hope you find this article informative and helpful for you!!

Read about new HTML5 tags

✯✯✯

Share

Leave a Reply

Your email address will not be published.

%d bloggers like this: