Post on 16-Jul-2015
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
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?
// 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.
// 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)) { ... }
// Left-to-right read directionp:dir(ltr) { color: black; }
// Right-to-left read directionp:dir(rtl) { color: gray; }
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; }
Smart 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.
Discrete typeDiscrete media feature take their values from a set. The values can be keywords or boolean.
// Very dark@media (light-level: normal) { ...}
// Normal@media (light-level: dim) { ...}
// Very light@media (light-level: washed) { ...}
// 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) { ...}
// 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) { ...}
Range typeRange media feature take their values from a range. Two values can be compared to see which is lesser and which is greater.
gridDetect if the output device use some type of grid. Like some tty terminals that use one type of fixed font. This is a boolean option.
// 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