Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS 4 - What's coming up

1bf877955dc2e43662320fd3b0280166?s=47 Diego Eis
February 24, 2015

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.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

February 24, 2015
Tweet

Transcript

  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
  3. None
  4. None
  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.

  11. None
  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) { ... }
  50. None
  51. None
  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