Slide 1
Slide 1 text
A BRIEF INTRODUCTION
ABOUT CSS LEVEL 4
Diego Eis
tableless.com.br
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
CSS Level 3
Was all about shadows, borders, backgrounds, 3D,
transitions and animations.
Slide 6
Slide 6 text
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?
Slide 7
Slide 7 text
CSS Level 4
Is all about select and detect things.
Slide 8
Slide 8 text
Sure, CSS Level 4 can do more
than that, but most important
is select and detect things.
#IMHO
Slide 9
Slide 9 text
Selectors
New selectors are coming.
Slide 10
Slide 10 text
Parent selector
Select a parent element based on its child.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
// Select LI that is a parent of P
$li > p { border: 1px solid #ccc; }
Slide 13
Slide 13 text
Logical Combinators
Select a collection of elements.
Slide 14
Slide 14 text
:matches()
Functional pseudo-class select elements contained in
selector list argument.
Slide 15
Slide 15 text
// Old way
section h1,
header h1,
article h1 {
color: blue;
}
Slide 16
Slide 16 text
// select H1 contained in section, header or article elements
:matches(section, header, article) h1 {
color: blue;
}
Slide 17
Slide 17 text
:not()
Functional pseudo-class with selector list as argument that
NOT is represented by this argument.
Slide 18
Slide 18 text
button:not([DISABLED]) { ... }
div:not(.container) { margin-top: 50px; }
Slide 19
Slide 19 text
Functional pseudo-class that taking a relative selector list as
an argument.
:has()
Slide 20
Slide 20 text
// 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)) { ... }
Slide 21
Slide 21 text
New Pseudo-Classes
A bunch of new pseudo-classes to make our life easier.
Slide 22
Slide 22 text
Linguistic Pseudo-Class
Identify language direction. Select an element that have
your content with a specific value of attribute lang.
Slide 23
Slide 23 text
@eshiota
Slide 24
Slide 24 text
:dir()
Select element based on language direction of read.
Slide 25
Slide 25 text
// Left-to-right read direction
p:dir(ltr) { color: black; }
// Right-to-left read direction
p:dir(rtl) { color: gray; }
Slide 26
Slide 26 text
:lang()
Select element based on language attribute.
Slide 27
Slide 27 text
// Paragraph with lang=“pt-br" defined
p:lang(pt-br) { color: blue; }
Slide 28
Slide 28 text
The Input Pseudo-classes
The pseudo-classes applied to elements that take user
input, like form fields.
Slide 29
Slide 29 text
// 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 { ... }
Slide 30
Slide 30 text
Selecting Highlighted
Content
Style a portion of document that have been highlighted by
the user in some way.
Slide 31
Slide 31 text
// 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; }
Slide 32
Slide 32 text
Time-dimensional
Pseudo-classes
selects elements that will be or have been spoken or
displayed, like in screen readers or even subtitles.
Slide 33
Slide 33 text
// 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; }
Slide 34
Slide 34 text
Work Draft of Selectors 4
http://www.w3.org/TR/selectors4/
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
Media Features
Media Features test a single specific feature of user agent
or display device.
We divided in two types: discrete or range.
Slide 37
Slide 37 text
Environment Media Features
Light-level use the ambient light to determine what style
you will apply.
Slide 38
Slide 38 text
// Very dark
@media (light-level: normal) {
...
}
// Normal
@media (light-level: dim) {
...
}
// Very light
@media (light-level: washed) {
...
}
Slide 39
Slide 39 text
Scripting Media Features
Detect if the actual UA support script languages on the
current document.
Slide 40
Slide 40 text
// 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) {
...
}
Slide 41
Slide 41 text
Interaction Media Features
Detect the presence and accuracy of the pointing device,
such as a mouse.
Slide 42
Slide 42 text
// 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) {
...
}
Slide 43
Slide 43 text
resolution
Detect the resolution of output device.
Slide 44
Slide 44 text
@media (resolution >= 2dppx) { ... }
@media print and (min-resolution: 300dpi) { ... }
Slide 45
Slide 45 text
Color Media Features
Analyse the color ability of device.
Slide 46
Slide 46 text
color
Detect the number of bits per color component of the
output device.
Slide 47
Slide 47 text
// Apply to color devices at least 8 bits
@media (color >= 8) { ... }
// This device support at least 256 color
Slide 48
Slide 48 text
monochrome
Detect the number of bits per pixel in a monochrome frame
buffer.
Slide 49
Slide 49 text
// 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) { ... }
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Work Draft of
Media Queries 4
http://www.w3.org/TR/mediaqueries-4/
Slide 53
Slide 53 text
Goodbye!
Let me know what you think!
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis