Css and its future
-
Upload
alex-bondarev -
Category
Internet
-
view
38 -
download
1
description
Transcript of Css and its future
![Page 1: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/1.jpg)
CSS AND ITS FUTURECreated by / Alex Bondarev @skip405
![Page 2: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/2.jpg)
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.
![Page 3: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/3.jpg)
WHY WAS IT INTRODUCED?CSS was invented to separate document content from
presentation. Such separation allowed to have one and the samedocument styled differently.
![Page 4: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/4.jpg)
CSS ZEN GARDEN
![Page 5: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/5.jpg)
![Page 6: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/6.jpg)
![Page 7: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/7.jpg)
![Page 8: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/8.jpg)
CSS SYNTAX.my-block{ display: none; margin: auto;}
selector, declaration block, property, value
![Page 9: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/9.jpg)
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
![Page 10: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/10.jpg)
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
![Page 11: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/11.jpg)
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
![Page 12: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/12.jpg)
AN !IMPORTANT NOTE!important is the master rule that can be overwritten by a more
specific selector with !important
![Page 13: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/13.jpg)
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
![Page 14: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/14.jpg)
CSS SHAPESis one of the most significant CSS features that are going to be
implemented.
![Page 15: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/15.jpg)
Soon it will be possible to do something like this in all browsers:
![Page 16: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/16.jpg)
![Page 17: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/17.jpg)
![Page 18: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/18.jpg)
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);
![Page 19: Css and its future](https://reader033.fdocuments.in/reader033/viewer/2022051413/55832f63d8b42adb148b4a87/html5/thumbnails/19.jpg)
CSS IS COOL! THANKS FOR LISTENING