A BRIEF INTRODUCTION ABOUT CSS LEVEL 4

Diego Eis tableless.com.br

Diego EisI love work with web. And I lost 37 pounds. ;-)

@diegoeis @tableless

http://tableless.com.br http://medium.com/@diegoeis http://slideshare.net/diegoeis

CSS Level 3Was all about shadows, borders, backgrounds, 3D, transitions and animations.

This was awesome!Because this solved many problems. Do you remember when you created rounded borders with four images, or created opacity background with PNG, or even used many DIVs to produce multiple backgrounds?

CSS Level 4Is all about select and detect things.

Sure, CSS Level 4 can do more than that, but most important

is select and detect things.

#IMHO

SelectorsNew selectors are coming.

Parent selectorSelect a parent element based on its child.

// Select LI that is a parent of P $li > p { border: 1px solid #ccc; }

Logical CombinatorsSelect a collection of elements.

:matches()Functional pseudo-class select elements contained in selector list argument.

// Old waysection h1, header h1, article h1 { color: blue;}

// select H1 contained in section, header or article elements:matches(section, header, article) h1 { color: blue;}

:not()Functional pseudo-class with selector list as argument that NOT is represented by this argument.

button:not([DISABLED]) { ... }

div:not(.container) { margin-top: 50px; }

Functional pseudo-class that taking a relative selector list as an argument.

:has()

// Select only A element that contain an <img> childa:has(> img) { ... }

// Select a section element, that NOT HAS these elementssection:not(:has(h1, h2, h3, h4, h5, h6)) { ... }

New Pseudo-ClassesA bunch of new pseudo-classes to make our life easier.

Linguistic Pseudo-ClassIdentify language direction. Select an element that have your content with a specific value of attribute lang.

@eshiota

:dir()Select element based on language direction of read.

// Left-to-right read directionp:dir(ltr) { color: black; }

// Right-to-left read directionp:dir(rtl) { color: gray; }

:lang()Select element based on language attribute.

// Paragraph with lang=“pt-br" definedp:lang(pt-br) { color: blue; }

The Input Pseudo-classesThe pseudo-classes applied to elements that take user input, like form fields.

// When the field is enabledinput[type="text"]:enabled { ... }

// When the field is disabledinput[type="text"]:disabled { ... }

// When the field is read-onlyinput[type="text”]:read-only { ... }

// When field is showing the placeholder attr textinput[type="text”]:placeholder-shown { ... }

// When the field is checked[type=“checkbox”]:checked,[type=“radio”]:checked { ... }

Selecting Highlighted ContentStyle a portion of document that have been highlighted by the user in some way.

// When the user select the text of Pp::selection { background: green; color: yellow; }

// When the browser flag a text as misspelled::spelling-error { color: red; }

// When the browser flag a text as grammatically incorrect::grammar-error { color: red; }

Time-dimensional Pseudo-classesselects elements that will be or have been spoken or displayed, like in screen readers or even subtitles.

// Select paragraph that is showing on screen or are spokenp:current { background: black; color: white; }

// Grouping many elements:current(p, li, dt, dd) { color: white; }

p:future { color: gray; }

p:past { color: red; }

Work Draft of Selectors 4http://www.w3.org/TR/selectors4/

All about Media QueriesThe Responsive Web Design is 90% based on Media Queries, but Media Queries is very limited. Media Queries Level 4 promise change that.

Media FeaturesMedia Features test a single specific feature of user agent or display device. We divided in two types: discrete or range.

Environment Media FeaturesLight-level use the ambient light to determine what style you will apply.

// Very dark@media (light-level: normal) { ...}

// Normal@media (light-level: dim) { ...}

// Very light@media (light-level: washed) { ...}

Scripting Media FeaturesDetect if the actual UA support script languages on the current document.

// The the UA supports scripting and that support is active@media (scripting: enabled) { ...}

// Indicate that scripting is active when page loads, but not afterwards. Like printed pages.@media (scripting: initial-only) { ...}

// Indicates that the UA will not run, not support or the support isn’t active@media (scripting: none) { ...}

Interaction Media FeaturesDetect the presence and accuracy of the pointing device, such as a mouse.

// The primary input mechanism does not include a pointing device@media (pointer: none) { ...}

// The mechanism include pointing device of limited accuracy@media (pointer: coarse) { ...}

// Detect if mechanism include accurate pointing device@media (pointer: fine) { ...}

resolutionDetect the resolution of output device.

@media (resolution >= 2dppx) { ... }

@media print and (min-resolution: 300dpi) { ... }

Color Media FeaturesAnalyse the color ability of device.

colorDetect the number of bits per color component of the output device.

// Apply to color devices at least 8 bits@media (color >= 8) { ... }

// This device support at least 256 color

monochromeDetect the number of bits per pixel in a monochrome frame buffer.

// Apply to device with more than 2 bits per pixels@media (monochrome >= 2) { ... }

// One style for color pages and another for monochrome@media print and (color) { ... }@media print and (monochrome) { ... }

Work Draft of Media Queries 4http://www.w3.org/TR/mediaqueries-4/

Goodbye!Let me know what you think!

@diegoeis @tableless

http://tableless.com.br http://medium.com/@diegoeis http://slideshare.net/diegoeis