SlideShare a Scribd company logo
1 of 99
Download to read offline
hello.

Friday, 15 October 2010
Rachel Andrew

                              @rachelandrew

                             rachelandrew.co.uk
                             edgeofmyseat.com
                               grabaperch.com


Friday, 15 October 2010
Mastering
                            CSS3
                          Selectors
Friday, 15 October 2010
CSS3 is the next
                           version of CSS




Friday, 15 October 2010
CSS3 is Modular




Friday, 15 October 2010
Some CSS3 modules
                    are more complete
                        than others



Friday, 15 October 2010
W3C Maturity Levels
                 Working Draft
                 Candidate Recommendation
                 Proposed Recommendation
                 W3C Recommendation
                 http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels




Friday, 15 October 2010
CSS3 is supported by
                       browsers

                          Some browsers and some (parts of) modules.




Friday, 15 October 2010
Using CSS3

Friday, 15 October 2010
Selectors module

                             W3C Proposed Recommendation
                           http://www.w3.org/TR/css3-selectors/




Friday, 15 October 2010
Basic Selectors
                 h1 {}

                 p {}

                 .thing {}

                 #uniquething {}

                 .thing p


Friday, 15 October 2010
The problem with
                           CSS2 selectors




Friday, 15 October 2010
Adding classes


                 <h1>My heading</h1>
                 <p class=”first”> ... </p>
                 <p> ... </p>




Friday, 15 October 2010
CSS3 Selectors
                              “Common sense” new selectors
                   target elements more precisely without adding classes




Friday, 15 October 2010
Structural pseudo-
                            class selectors




Friday, 15 October 2010
a:link {}
                 a:visited {}
                 a:hover {}
                 a:active {}




Friday, 15 October 2010
:first-child

                    target an element when it is the first child of a parent
                                         element




Friday, 15 October 2010
:first-child




Friday, 15 October 2010
:first-child

                 div#wrapper p {
                 ! ! font-size: 1.5em;
                 }




Friday, 15 October 2010
:first-child

                 div#wrapper p:first-child {
                 ! ! font-size: 1.5em;
                 }




Friday, 15 October 2010
:first-child




Friday, 15 October 2010
:last-child

                     target an element when it is the last child of a parent
                                          element




Friday, 15 October 2010
:last-child




Friday, 15 October 2010
:last-child

                 ul#navigation li:last-child {
                 ! ! border-bottom: none;
                 }




Friday, 15 October 2010
:last-child




Friday, 15 October 2010
:nth-child

                   select multiple elements according to their position in
                                      the document tree




Friday, 15 October 2010
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(odd) td {
                 ! ! background-color: #f0e9c5;
                 }




Friday, 15 October 2010
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(3) td {
                 ! ! background-color: #f0e9c5;
                 }




Friday, 15 October 2010
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(2n+1) td {
                 ! ! background-color: #f0e9c5;
                 }


                          http://reference.sitepoint.com/css/understandingnthchildexpressions




Friday, 15 October 2010
:nth-of-type

                   select multiple elements according to their position in
                   the document tree BUT only those elements that are
                         the same as the type the rule is applied to.




Friday, 15 October 2010
:nth-of-type

                 p:nth-of-type(odd) {
                 ! ! background-color: #f0e9c5;
                 }




Friday, 15 October 2010
:nth-of-type




Friday, 15 October 2010
:only-child

                  matches an element if it is the only child element of it’s
                                          parent.




Friday, 15 October 2010
:only-child
                 li {
                 ! list-style-type: disc;
                 }
                 !
                 li:only-child {
                 ! list-style-type: none;
                 }




Friday, 15 October 2010
:only-child




Friday, 15 October 2010
:empty

                          matches an element if it is empty




Friday, 15 October 2010
:empty
                 p {
                 ! padding: 0 0 1em 0;
                 ! margin: 0;
                 }
                 !
                 p:empty {
                 ! padding: 0;
                 }



Friday, 15 October 2010
For input elements

                          Structural pseudo-classes for use with forms.




Friday, 15 October 2010
:checked

                          the checked state of a checkbox or radio button




Friday, 15 October 2010
:checked

                 #agreeterms:checked {
                   border:2px solid blue;
                 }




Friday, 15 October 2010
enabled and disabled

                          detecting input element states




Friday, 15 October 2010
:enabled

                 input:enabled {
                   color: #000;
                 }




Friday, 15 October 2010
:disabled

                 input:disabled {
                   color: #999;
                 }




Friday, 15 October 2010
the Negation
                          pseudo-class

                             :not(selector)




Friday, 15 October 2010
:not
                 <p> ... </p>
                 <p class=”box”> ... </p>
                 <p> ... </p>




Friday, 15 October 2010
:not
                 p:not(.box) {
                 ! padding: 0 0 3em 0;
                 ! margin: 0;
                 }
                 !
                 p.box {
                 ! border:1px solid #000;
                 ! margin: 0 0 2em 0;
                 }


Friday, 15 October 2010
:not




Friday, 15 October 2010
Pseudo-elements




Friday, 15 October 2010
:first-letter

                          the first character of the first line of text




Friday, 15 October 2010
:first-letter
                 div#wrapper:first-letter {
                 ! font-size: 200%;
                 ! font-weight: bold;
                 ! color: red;
                 }




Friday, 15 October 2010
:first-letter




Friday, 15 October 2010
:first-line

                          the first formatted line of text




Friday, 15 October 2010
:first-line
                 div#wrapper:first-line {
                 ! font-size: 200%;
                 ! font-weight: bold;
                 ! color: red;
                 }




Friday, 15 October 2010
:first-line




Friday, 15 October 2010
:before

                          Render content before the element when using
                                       generated content




Friday, 15 October 2010
:before

                 <div id=”content”> ... </div>




Friday, 15 October 2010
:before
                 #content:before {
                   content: "Start here:";
                 }




Friday, 15 October 2010
:before




Friday, 15 October 2010
:after

                          Render content after the element when using
                                      generated content




Friday, 15 October 2010
:after
                 #content:after {
                   content: "End here:";
                 }




Friday, 15 October 2010
::selection

                          Content selected in browser by the user




Friday, 15 October 2010
::selection
                 div#wrapper p::selection {!
                   background-color: red;
                 }




Friday, 15 October 2010
::selection




Friday, 15 October 2010
Combinators

                          Combining selectors to target elements




Friday, 15 October 2010
Descendant Selector

                    Select all elements that are descendants of a specified
                                             parent




Friday, 15 October 2010
Descendant Selector

                 div#wrapper p {
                 ! font-size: 1.5em;
                 }




Friday, 15 October 2010
Child Selector

                          Select all elements that are immediate children of a
                                            specified parent




Friday, 15 October 2010
Child Selector
                 <ul>
                  <li>Item 1
                   <ol>
                      <li>Sub list item 1</li>
                      <li>Sub list item 2</li>
                   </ol>
                  </li>
                  <li>Item 2</li>
                 </ul>

Friday, 15 October 2010
Child Selector

                   li {
                   ! color: #000;
                   }
                   !
                   ul > li {
                   ! color: red;
                   }



Friday, 15 October 2010
Child Selector




Friday, 15 October 2010
Adjacent Sibling

                          Select elements that are the adjacent siblings of an
                                               element




Friday, 15 October 2010
Adjacent Sibling

                 div#wrapper h1 + p {
                 ! font-size: 1.5em;
                 }




Friday, 15 October 2010
Adjacent Sibling




Friday, 15 October 2010
General Sibling

                          Select elements that are the siblings of an element




Friday, 15 October 2010
General Sibling

                 div#wrapper h2~p {
                 ! color: red;
                 }




Friday, 15 October 2010
General Sibling




Friday, 15 October 2010
Attribute Selectors

                            Select elements based on attributes




Friday, 15 October 2010
Attribute Selectors

                 form input[type="text"] {

                 }
                 !
                 form input[type="submit"] {

                 }




Friday, 15 October 2010
Attribute Selectors




Friday, 15 October 2010
Attribute Selectors
                 label[for="fContact"] {
                     ! float: none;
                     ! width: auto;
                 }

                 a[href ^="mailto:"] {
                 ! ! padding-right: 20px;
                 ! ! background-image:url(email.png);
                 ! ! background-repeat: no-repeat;
                 ! ! background-position: right center;
                 }




Friday, 15 October 2010
Browser
                          Support
Friday, 15 October 2010
Browser Support




Friday, 15 October 2010
Does it
                          matter?
Friday, 15 October 2010
Friday, 15 October 2010
Friday, 15 October 2010
Yes, it
                          matters.
Friday, 15 October 2010
Vendor-specific
                            extensions

                           Implementing early stage CSS3




Friday, 15 October 2010
border-radius




Friday, 15 October 2010
border-radius
                 .box {
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                  }




Friday, 15 October 2010
In defence of vendor-
                   specific extensions




Friday, 15 October 2010
JavaScript

                          Plug the holes in browser support using JavaScript.




Friday, 15 October 2010
jQuery: first-child
                 div#wrapper p:first-child,
                 div#wrapper p.first {
                 ! ! font-size: 1.5em;
                 }




                 <script src="http://code.jquery.com/jquery-latest.js"></
                 script>
                 <script>
                   $(document).ready(function(){
                 ! $("div#wrapper p:first-child").addClass("first");
                   });
                 </script>



Friday, 15 October 2010
jQuery: last-child
                 ul#navigation li:last-child, ul#navigation li.last {
                 ! ! border-bottom: none;
                 }




                 <script src="http://code.jquery.com/jquery-latest.js"></
                 script>
                 <script>
                   $(document).ready(function(){
                 ! $("ul#navigation li:last-child").addClass("last");
                   });
                 </script>



Friday, 15 October 2010
jQuery: nth-child
                 tr:nth-child(odd) td, td.odd {
                 ! background-color: #f0e9c5;
                 }




                 <script src="http://code.jquery.com/jquery-latest.js"></
                 script>
                 <script>
                   $(document).ready(function(){
                 ! $("tr:nth-child(odd) td").addClass("odd");
                   });
                 </script>



Friday, 15 October 2010
Scripts that “fix IE”

                           http://www.keithclark.co.uk/labs/ie-css3/
                                    http://ecsstender.org




Friday, 15 October 2010
Thank you.




Friday, 15 October 2010

More Related Content

Viewers also liked

HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 SemanticsShay Howe
 
Smacking Git Around Advanced Git Tricks
Smacking Git Around   Advanced Git TricksSmacking Git Around   Advanced Git Tricks
Smacking Git Around Advanced Git Tricksrailsconf
 
Quality Development with HTML5
Quality Development with HTML5Quality Development with HTML5
Quality Development with HTML5Shay Howe
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3Shay Howe
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box modelIdan Gazit
 
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderShay Howe
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSSShay Howe
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshellNelson Tai
 
Git and GitHub
Git and GitHubGit and GitHub
Git and GitHubJames Gray
 
Advanced Git
Advanced GitAdvanced Git
Advanced Gitsegv
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git RightSven Peters
 
Introduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guideIntroduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guideRohit Arora
 

Viewers also liked (20)

HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 Semantics
 
Smacking Git Around Advanced Git Tricks
Smacking Git Around   Advanced Git TricksSmacking Git Around   Advanced Git Tricks
Smacking Git Around Advanced Git Tricks
 
Quality Development with HTML5
Quality Development with HTML5Quality Development with HTML5
Quality Development with HTML5
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshell
 
The git
The gitThe git
The git
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box model
 
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product Leader
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSS
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshell
 
Intro To Git
Intro To GitIntro To Git
Intro To Git
 
Git and GitHub
Git and GitHubGit and GitHub
Git and GitHub
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Advanced Git
Advanced GitAdvanced Git
Advanced Git
 
Git Tutorial 教學
Git Tutorial 教學Git Tutorial 教學
Git Tutorial 教學
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git Right
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Introduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guideIntroduction to Git/Github - A beginner's guide
Introduction to Git/Github - A beginner's guide
 
Getting Git
Getting GitGetting Git
Getting Git
 

Similar to Mastering CSS3 Selectors

IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиковYuriy Artyukh
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Zi Bin Cheah
 
The Limited Red Society
The Limited Red SocietyThe Limited Red Society
The Limited Red SocietyNaresh Jain
 
Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10Rick Martínez
 
Poisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and HowPoisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and HowBrian Ford
 
使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格Daniel Cheng
 
Snowflake in music
Snowflake in musicSnowflake in music
Snowflake in musicErik Duval
 

Similar to Mastering CSS3 Selectors (8)

IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиков
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
 
The Limited Red Society
The Limited Red SocietyThe Limited Red Society
The Limited Red Society
 
Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10Hardcore Extending Rails 3 - From RailsConf '10
Hardcore Extending Rails 3 - From RailsConf '10
 
Poisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and HowPoisoning Rubinius: The _why and How
Poisoning Rubinius: The _why and How
 
使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格使用 PandaForm.com 製作及管理網上表格
使用 PandaForm.com 製作及管理網上表格
 
Object garphs swapping
Object garphs swappingObject garphs swapping
Object garphs swapping
 
Snowflake in music
Snowflake in musicSnowflake in music
Snowflake in music
 

More from Rachel Andrew

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutRachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutRachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayRachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSRachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 

More from Rachel Andrew (20)

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 
Graduating to Grid
Graduating to GridGraduating to Grid
Graduating to Grid
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 

Recently uploaded

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Recently uploaded (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

Mastering CSS3 Selectors