A brief introduction about what expect from CSS Level 4. CSS 3 was all about shadows, borders, backgrounds, 3D, transitions and animations. CSS 4 is all about select and detect things.
2. Diego Eis
I love work with web.
And I lost 37 pounds. ;-)
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis
3.
4.
5. CSS Level 3
Was all about shadows, borders, backgrounds, 3D,
transitions and animations.
6. 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?
20. // Select only A element that contain an <img> child
a:has(> img) { ... }
// Select a section element, that NOT HAS these elements
section:not(:has(h1, h2, h3, h4, h5, h6)) { ... }
29. // When the field is enabled
input[type="text"]:enabled { ... }
// When the field is disabled
input[type="text"]:disabled { ... }
// When the field is read-only
input[type="text”]:read-only { ... }
// When field is showing the placeholder attr text
input[type="text”]:placeholder-shown { ... }
// When the field is checked
[type=“checkbox”]:checked,
[type=“radio”]:checked { ... }
31. // When the user select the text of P
p::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; }
33. // Select paragraph that is showing on screen or are spoken
p:current { background: black; color: white; }
// Grouping many elements
:current(p, li, dt, dd) { color: white; }
p:future { color: gray; }
p:past { color: red; }
34. Work Draft of Selectors 4
http://www.w3.org/TR/selectors4/
35. All about Media Queries
The Responsive Web Design is 90% based on Media
Queries, but Media Queries is very limited. Media Queries
Level 4 promise change that.
36. Media Features
Media Features test a single specific feature of user agent
or display device.
We divided in two types: discrete or range.
40. // 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) {
...
}
42. // 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) {
...
}
49. // 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) { ... }