CSS AND ITS FUTURECreated by / Alex Bondarev @skip405

WHAT IS CSS?CSS is is a style sheet language used for describing the look and

formatting of a document written in a markup language.

WHY WAS IT INTRODUCED?CSS was invented to separate document content from

presentation. Such separation allowed to have one and the samedocument styled differently.

CSS ZEN GARDEN

CSS SYNTAX.my-block{ display: none; margin: auto;}

selector, declaration block, property, value

WHAT IS CSS AGAIN?the reason it's called Cascading Style Sheets is that CSS

introduces a priority scheme. It is needed in situations whenstyles for an element on the page come from different sources

SELECTOR SPECIFICITYThere's a scheme that allows to count selector specificity. It

consists of 4 numbers and looks like this:0,0,1,0

In other words, the numbers represent the quantity of differentCSS selectors in one

style attribute (style="display: none;"), id(#new), class (.element), element (p, span, div)

.my-block{ display: none; margin: auto;}

This selector contains only a single class-name, so it hasspecificity of 0,0,1,0

PARTY TIME :)A person who is the first to calculate the specificity of this

selector gets a Mishka na polyane

html body section.id#classdiv.id + .id.id--header >

li.id a

AN !IMPORTANT NOTE!important is the master rule that can be overwritten by a more

specific selector with !important

MINUSES THAT ARE BEING SEEN TONo native variables.No way to target the parent selectorNo layout mechanismNo calculation. It's impossible to natively use something likethis: 100% - 2em + 30px

No native variables. Firefox is the first (and the only so far) tohave themNo way to target the parent selectorNo layout mechanism (flexbox to the rescue but support iscatching up)No calculation. It's impossible to natively use something likethis: 100% - 2em + 30px - calc function is supported fromIE9 and newer, and Android 4.4 and newer

Some things can be solved by preprocessors

CSS SHAPESis one of the most significant CSS features that are going to be

implemented.

Soon it will be possible to do something like this in all browsers:

IT DOESN'T END HERE OF COURSE :)There are lots of things to come in the future. Here's a list of the

most interesting CSS possibilities that are planned.

New selector possibilities: @namespace, :matches, :local-link(3) etc.Wider support of Blend modesConic gradientsUsing an html element on the page as a background-imagewith background: element(#src);

CSS IS COOL! THANKS FOR LISTENING