$30 off During Our Annual Pro Sale. View Details »

CSS 4 - What's coming up

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.

Diego Eis

February 24, 2015
Tweet

More Decks by Diego Eis

Other Decks in Technology

Transcript

  1. 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
  2. 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?
  3. Sure, CSS Level 4 can do more than that, but

    most important is select and detect things. #IMHO
  4. // Select LI that is a parent of P $li

    > p { border: 1px solid #ccc; }
  5. // select H1 contained in section, header or article elements

    :matches(section, header, article) h1 { color: blue; }
  6. // 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)) { ... }
  7. Linguistic Pseudo-Class Identify language direction. Select an element that have

    your content with a specific value of attribute lang.
  8. // Left-to-right read direction p:dir(ltr) { color: black; } //

    Right-to-left read direction p:dir(rtl) { color: gray; }
  9. // 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 { ... }
  10. // 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; }
  11. Time-dimensional Pseudo-classes selects elements that will be or have been

    spoken or displayed, like in screen readers or even subtitles.
  12. // 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; }
  13. 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.
  14. Media Features Media Features test a single specific feature of

    user agent or display device. We divided in two types: discrete or range.
  15. // Very dark @media (light-level: normal) { ... } //

    Normal @media (light-level: dim) { ... } // Very light @media (light-level: washed) { ... }
  16. // 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) { ... }
  17. // 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) { ... }
  18. // Apply to color devices at least 8 bits @media

    (color >= 8) { ... } // This device support at least 256 color
  19. // 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) { ... }
  20. Goodbye! Let me know what you think! @diegoeis @tableless http://tableless.com.br

    http://medium.com/@diegoeis http://slideshare.net/diegoeis