CSS 4 - What's coming up

A brief introduction about CSS Level 4.

CSS 3 was all about shadows, borders, backgrounds, 3D, transitions and animations.
CSS 4 is all about select and detect things.

Transcript

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

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

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

   View Slide

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?
   

   View Slide

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

   View Slide

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

   View Slide

9. Selectors
   New selectors are coming.
   

   View Slide

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

    View Slide

11. View Slide

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

    View Slide

13. Logical Combinators
    Select a collection of elements.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. // Select only A element that contain an child
    a:has(> img) { ... }
    // Select a section element, that NOT HAS these elements
    section:not(:has(h1, h2, h3, h4, h5, h6)) { ... }
    

    View Slide

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

    View Slide

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

    View Slide

23. @eshiota
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. resolution
    Detect the resolution of output device.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. View Slide

51. View Slide

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

    View Slide

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

    View Slide