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

More Related Content

Viewers also liked

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataDiego Eis
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodPhil Calçado
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in ScalaPhil Calçado
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patternsrafaelferreira
 
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionRhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionPhil Calçado
 
ScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionPhil Calçado
 
Evolutionary Architecture at Work
Evolutionary  Architecture at WorkEvolutionary  Architecture at Work
Evolutionary Architecture at WorkPhil Calçado
 
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015Phil Calçado
 
Vida longa para SOA com microservices
Vida longa para SOA com microservicesVida longa para SOA com microservices
Vida longa para SOA com microservicesFábio Rosato
 
Microservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosMicroservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosVinícius Krolow
 
Amadurecendo Equipes com Microservices
Amadurecendo Equipes com MicroservicesAmadurecendo Equipes com Microservices
Amadurecendo Equipes com Microservicessanchez_ivan
 
Integração utilizando REST API e Microservices
Integração utilizando REST API e MicroservicesIntegração utilizando REST API e Microservices
Integração utilizando REST API e MicroservicesDenis Santos
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devopsDiego Pacheco
 
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)Tiago Marchetti Dolphine
 

Viewers also liked (20)

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog Food
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patterns
 
Desafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviçosDesafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviços
 
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionRhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a Function
 
ScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a Function
 
Evolutionary Architecture at Work
Evolutionary  Architecture at WorkEvolutionary  Architecture at Work
Evolutionary Architecture at Work
 
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
 
Vida longa para SOA com microservices
Vida longa para SOA com microservicesVida longa para SOA com microservices
Vida longa para SOA com microservices
 
Microservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosMicroservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenos
 
Amadurecendo Equipes com Microservices
Amadurecendo Equipes com MicroservicesAmadurecendo Equipes com Microservices
Amadurecendo Equipes com Microservices
 
Integração utilizando REST API e Microservices
Integração utilizando REST API e MicroservicesIntegração utilizando REST API e Microservices
Integração utilizando REST API e Microservices
 
Microservices
MicroservicesMicroservices
Microservices
 
Introdução à Microservices
Introdução à MicroservicesIntrodução à Microservices
Introdução à Microservices
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devops
 
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
 

Similar to CSS 4 - What's coming up

La famille *down
La famille *downLa famille *down
La famille *downtuxette
 
La famille *down
La famille *downLa famille *down
La famille *downtuxette
 
Designing for Inclusion with Media Queries
Designing for Inclusion with Media QueriesDesigning for Inclusion with Media Queries
Designing for Inclusion with Media QueriesEric Bailey
 
Cis 170 c ilab 7 of 7 sequential files
Cis 170 c ilab 7 of 7 sequential filesCis 170 c ilab 7 of 7 sequential files
Cis 170 c ilab 7 of 7 sequential filesCIS321
 
Jedi Slides Intro2 Chapter12 Advanced Io Streams
Jedi Slides Intro2 Chapter12 Advanced Io StreamsJedi Slides Intro2 Chapter12 Advanced Io Streams
Jedi Slides Intro2 Chapter12 Advanced Io StreamsDon Bosco BSIT
 
R Introduction
R IntroductionR Introduction
R Introductionschamber
 
Devry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filesDevry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filescskvsmi44
 
Devry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filesDevry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filesnoahjamessss
 
Student Lab Activity CIS170 Week 6 Lab Instructions.docx
Student Lab Activity CIS170 Week 6 Lab Instructions.docxStudent Lab Activity CIS170 Week 6 Lab Instructions.docx
Student Lab Activity CIS170 Week 6 Lab Instructions.docxflorriezhamphrey3065
 
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...mporhel
 
Oop lec 4(oop design, style, characteristics)
Oop lec 4(oop design, style, characteristics)Oop lec 4(oop design, style, characteristics)
Oop lec 4(oop design, style, characteristics)Asfand Hassan
 
Stream classes in C++
Stream classes in C++Stream classes in C++
Stream classes in C++Shyam Gupta
 
DevLearn 2017 - Getting Started with Adapt
DevLearn 2017 - Getting Started with AdaptDevLearn 2017 - Getting Started with Adapt
DevLearn 2017 - Getting Started with AdaptFloat
 
If you have a problem, if no one else can help... and if you can find them, m...
If you have a problem, if no one else can help... and if you can find them, m...If you have a problem, if no one else can help... and if you can find them, m...
If you have a problem, if no one else can help... and if you can find them, m...bitcoder
 
Java - Processing input and output
Java - Processing input and outputJava - Processing input and output
Java - Processing input and outputRiccardo Cardin
 
Basic commands of ArcGIS
Basic commands of ArcGISBasic commands of ArcGIS
Basic commands of ArcGISKU Leuven
 
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/O
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/OCore Java Programming Language (JSE) : Chapter XI - Console I/O and File I/O
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/OWebStackAcademy
 

Similar to CSS 4 - What's coming up (20)

La famille *down
La famille *downLa famille *down
La famille *down
 
La famille *down
La famille *downLa famille *down
La famille *down
 
Designing for Inclusion with Media Queries
Designing for Inclusion with Media QueriesDesigning for Inclusion with Media Queries
Designing for Inclusion with Media Queries
 
Cis 170 c ilab 7 of 7 sequential files
Cis 170 c ilab 7 of 7 sequential filesCis 170 c ilab 7 of 7 sequential files
Cis 170 c ilab 7 of 7 sequential files
 
Dart
DartDart
Dart
 
Jedi Slides Intro2 Chapter12 Advanced Io Streams
Jedi Slides Intro2 Chapter12 Advanced Io StreamsJedi Slides Intro2 Chapter12 Advanced Io Streams
Jedi Slides Intro2 Chapter12 Advanced Io Streams
 
R Introduction
R IntroductionR Introduction
R Introduction
 
Devry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filesDevry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-files
 
Devry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-filesDevry cis-170-c-i lab-7-of-7-sequential-files
Devry cis-170-c-i lab-7-of-7-sequential-files
 
Student Lab Activity CIS170 Week 6 Lab Instructions.docx
Student Lab Activity CIS170 Week 6 Lab Instructions.docxStudent Lab Activity CIS170 Week 6 Lab Instructions.docx
Student Lab Activity CIS170 Week 6 Lab Instructions.docx
 
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...
How to make Robust and Scalable Modeling Workbenches with Sirius - SiriusCon ...
 
Oop lec 4(oop design, style, characteristics)
Oop lec 4(oop design, style, characteristics)Oop lec 4(oop design, style, characteristics)
Oop lec 4(oop design, style, characteristics)
 
Stream classes in C++
Stream classes in C++Stream classes in C++
Stream classes in C++
 
DevLearn 2017 - Getting Started with Adapt
DevLearn 2017 - Getting Started with AdaptDevLearn 2017 - Getting Started with Adapt
DevLearn 2017 - Getting Started with Adapt
 
Lotus Domino
Lotus DominoLotus Domino
Lotus Domino
 
C++ project
C++ projectC++ project
C++ project
 
If you have a problem, if no one else can help... and if you can find them, m...
If you have a problem, if no one else can help... and if you can find them, m...If you have a problem, if no one else can help... and if you can find them, m...
If you have a problem, if no one else can help... and if you can find them, m...
 
Java - Processing input and output
Java - Processing input and outputJava - Processing input and output
Java - Processing input and output
 
Basic commands of ArcGIS
Basic commands of ArcGISBasic commands of ArcGIS
Basic commands of ArcGIS
 
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/O
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/OCore Java Programming Language (JSE) : Chapter XI - Console I/O and File I/O
Core Java Programming Language (JSE) : Chapter XI - Console I/O and File I/O
 

More from Diego Eis

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosDiego Eis
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisDiego Eis
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaDiego Eis
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webDiego Eis
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeDiego Eis
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorDiego Eis
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contextoDiego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuroDiego Eis
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerDiego Eis
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorDiego Eis
 

More from Diego Eis (15)

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 

Recently uploaded

The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxEasyPrinterHelp
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 

Recently uploaded (20)

The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 

CSS 4 - What's coming up

  • 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.
  • 4.
  • 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
  • 10. Parent selector Select a parent element based on its child.
  • 11.
  • 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.
  • 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.
  • 51.
  • 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