The document provides an overview of CSS Level 4, highlighting new features and pseudo-classes that enhance selection and detection of elements. Key advancements include parent selectors, logical combinators, input pseudo-classes, and media query improvements such as environment, scripting, and interaction media features. The document discusses how these updates simplify web design and improve responsiveness.

1. A BRIEF INTRODUCTION
ABOUT CSS LEVEL 4
Diego Eis
tableless.com.br

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

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?

7. CSS Level 4
Is all about select and detect things.

8. Sure, CSS Level 4 can do more
than that, but most important
is select and detect things.
#IMHO

9. Selectors
New selectors are coming.

10. Parent selector
Select a parent element based on its child.

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

13. Logical Combinators
Select a collection of elements.

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

15. // Old way
section h1,
header h1,
article h1 {
color: blue;
}

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

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

18. button:not([DISABLED]) { ... }
div:not(.container) { margin-top: 50px; }

19. Functional pseudo-class that taking a relative selector list as
an argument.
:has()

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)) { ... }

21. New Pseudo-Classes
A bunch of new pseudo-classes to make our life easier.

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

23. @eshiota

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

25. // Left-to-right read direction
p:dir(ltr) { color: black; }
// Right-to-left read direction
p:dir(rtl) { color: gray; }

26. :lang()
Select element based on language attribute.

27. // Paragraph with lang=“pt-br" defined
p:lang(pt-br) { color: blue; }

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

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 { ... }

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

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; }

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

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.

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

38. // Very dark
@media (light-level: normal) {
...
}
// Normal
@media (light-level: dim) {
...
}
// Very light
@media (light-level: washed) {
...
}

39. Scripting Media Features
Detect if the actual UA support script languages on the
current document.

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) {
...
}

41. Interaction Media Features
Detect the presence and accuracy of the pointing device,
such as a mouse.

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) {
...
}

43. resolution
Detect the resolution of output device.

44. @media (resolution >= 2dppx) { ... }
@media print and (min-resolution: 300dpi) { ... }

45. Color Media Features
Analyse the color ability of device.

46. color
Detect the number of bits per color component of the
output device.

47. // Apply to color devices at least 8 bits
@media (color >= 8) { ... }
// This device support at least 256 color

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

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) { ... }

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

53. Goodbye!
Let me know what you think!
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis