Getting real with pseudo-elements – OverviewQuick definitionThings I'm not going to talk about – :Before/:afterBefore/after needs a content, event empty stringNot on self closing tag element

View Github Repository Open presentation in a new window

Calvein

See all presentation from Calvein

Getting real with pseudo-elements – OverviewQuick definitionThings I'm not going to talk about – :Before/:afterBefore/after needs a content, event empty stringNot on self closing tag element

0 1

sydcss-20140206

On Github Calvein / sydcss-20140206

Getting real with pseudo-elements

And with François Robichet (@calvein)

Overview

Quick definition

Things I'm not going to talk about

Things I won't talk about

But I'm actually talkiing about right now

Pseudo-classes

  • :active
  • :checked
  • :default
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited
http://bit.ly/pseudo-classes

Alphabetical order

Interaction, forms, filter, others

dir(), left & right are weird

Link to MDN with list

Differences between both

Pseudo-classes selectors, filter stuff to the selected element.

Pseudo-elements, add a fake element to the selected element.

Imagine this HTML

<ul>
    <li>Bonjour
    <li>SydCSS
</ul>

This code will select all the <li>, and then them filter to get the first from the parent.

li:first-child {}

While this one will add an empty element before the content of all the <li>s.

li:before {}

Pseudo-elements content is replaced from the parent or null (before/after)

Pseudo-elements are not in the DOM, no JS interaction possible

Pseudo-elements

  • ::first-letter
  • ::first-line
  • ::selection
  • ::before
  • ::after
http://bit.ly/pseudo-elements

Pseudo-elements have 2 : in CSS3

Since IE8, CSS 2.1

::selection is not standard

List from MDN with links

::first-letter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 


Good for initials


Not all CSS properties, font, text, margin, padding, border, background, etc...
::first-line





Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor






No syntax highlighting because it's a style with a display block


Add .ipsum:last-child:first-line
Both




It's tricky to write about TowerFall Ascension without sounding like a child — mostly because it's a powerful distillery of childlike glee.


I can say, without an ounce of hyperbole, that I have never shouted, cheered or laughed so much playing a game in my life. TowerFall Ascension is designed to evoke these reactions in every single match, and it always, always does. Regardless of how its settings and variables have been tinkered, or the relative skill levels of its players, the matchup is exciting and dynamic every single time.




Taken from polygon
::selection


  • Non standard
    • 

  • Only support color, background, background-color and text-shadow

    • 

  • Always needs ::-moz-selection & ::selection
    • 

Moz and normal can't be chained, need to duplicate
:Before/:after
Before/after needs a content, event empty string


Not on self closing tag element
Content


  • 'string'
    • 

  • url(URI)
    • 

  • attr(ATTR)
    • 

  • 
counter and quote stuff
    • 

Normal, none, inherit & initial do nothing and let it hidden


String, even empty shows it, you can put ASCII characters too


URI for image, svg, CSS gradient


Attr return the content of the attribute, usefull for i18n'n'shit


counter is to make list with non-list element, basically


quote, who care


I'll show tips
Examples




francois@robichet.com


francois@robichet.com


francois@robichet.com








Don't put content in it, screen readers & bot don't read them
Arrows


by Chris Coyier (@chriscoyier)


Click in the pen


Use hands and rectangles to show border
Other shapes




Circles


I have a bullet point








Tick


I have a tick






Intro to next slide
Real life examples


Small triangle in a bigger one


Circle, easy to change color & size


Next is snippets/protips
Clearfix


From HTML5 boilerplate, used by Bootstrap.


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


Popularized by HTML5boilerplate, used in Bootstrap
Vertical align


I'm aligned Me too






We don't have the size of anything (so no top 50% margin-top - width / 2)


Needs only inline blocks inside


Next is a overkill example
Ribbons


See http://soiheardyouliekribbon.com


3 el, h1, i & u
Voilà


François Robichet (@calvein)

http://bit.ly/pseudo-elements-talk