SlideShare a Scribd company logo

Css and its future

•
•
Alex Bondarev
Alex Bondarev

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML or XML. CSS was introduced to separate document content from presentation, allowing the same content to be styled differently. CSS syntax uses selectors to target elements and declaration blocks with properties and values to style them. The "cascading" refers to how CSS prioritizes styles from different sources using a specificity scheme. Future developments include new selectors, blend modes, gradients, and using HTML elements as backgrounds.

1 of 19
Download to read offline
CSS AND ITS FUTURE Created 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 same document styled differently.
CSS ZEN GARDEN
Css and its future
Css and its future
Css and its future
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 when styles for an element on the page come from different sources
SELECTOR SPECIFICITY There'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 different CSS 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 has specificity 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#class div.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 TO No native variables. No way to target the parent selector No layout mechanism No calculation. It's impossible to natively use something like this: 100% - 2em + 30px No native variables. Firefox is the first (and the only so far) to have them No way to target the parent selector No layout mechanism (flexbox to the rescue but support is catching up) No calculation. It's impossible to natively use something like this: 100% - 2em + 30px - calc function is supported from IE9 and newer, and Android 4.4 and newer Some things can be solved by preprocessors
CSS SHAPES is 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:
Css and its future
Css and its future
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 modes Conic gradients Using an html element on the page as a background-image with background: element(#src);
CSS IS COOL! THANKS FOR LISTENING

More Related Content

Css and its future

  • 1. CSS AND ITS FUTURE Created by Alex Bondarev / @skip405
  • 2. 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.
  • 3. WHY WAS IT INTRODUCED? CSS was invented to separate document content from presentation. Such separation allowed to have one and the same document styled differently.
  • 8. CSS SYNTAX .my-block{ display: none; margin: auto; } selector, declaration block, property, value
  • 9. WHAT IS CSS AGAIN? the reason it's called Cascading Style Sheets is that CSS introduces a priority scheme. It is needed in situations when styles for an element on the page come from different sources
  • 10. SELECTOR SPECIFICITY There'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 different CSS 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 has specificity of 0,0,1,0
  • 11. PARTY TIME :) A person who is the first to calculate the specificity of this selector gets a Mishka na polyane html body section.id#class div.id + .id.id--header > li.id a
  • 12. AN !IMPORTANT NOTE !important is the master rule that can be overwritten by a more specific selector with !important
  • 13. MINUSES THAT ARE BEING SEEN TO No native variables. No way to target the parent selector No layout mechanism No calculation. It's impossible to natively use something like this: 100% - 2em + 30px No native variables. Firefox is the first (and the only so far) to have them No way to target the parent selector No layout mechanism (flexbox to the rescue but support is catching up) No calculation. It's impossible to natively use something like this: 100% - 2em + 30px - calc function is supported from IE9 and newer, and Android 4.4 and newer Some things can be solved by preprocessors
  • 14. CSS SHAPES is one of the most significant CSS features that are going to be implemented.
  • 15. Soon it will be possible to do something like this in all browsers:
  • 18. 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 modes Conic gradients Using an html element on the page as a background-image with background: element(#src);
  • 19. CSS IS COOL! THANKS FOR LISTENING