1


It's jUST A LITTLE


{CSS}

1. Specificity / INheritance

In the simplest case, the last declaration that matches a given element is the one that gets applied. What colour will this be?


<p id="id" class="class"><span>Hello World</span></p>
p { color: red; }
p { color: green; }



But if one selector is more specific than another, that declaration gets applied, regardless of the order they're listed in. What colour will this be?

<p id="id" class="class"><span>Hello World</span></p>
.class { color: red; }
p { color: black; }

What colour will this be?

.class { color: red; }
#id { color: blue; }
p { color: black; }

Some selector patterns are more specific than others.


– #id (worth 100 points each)

– .class (worth 10 points each)

– element (worth 1 point each)


Specificity also has a cumulative effect. What colour will this be?

#id { color: green; }
p#id { color: yellow; }

But be careful whenever inheritance is involved!


     - Specificity is not inherited !!!


When calculating specificity, we can't compare apples and oranges. Remember to read your selectors right-to-left. What colour will this be?


#id { color: red; }
p span { color: black; }

2. USEFUL SELECTORS

Selectors can match an element based on more than 1 class at a time.


<ul>
    <li class="heading">Heading</li>
    <li class="menu-item">One</li>
    <li class="menu-item">Two</li>
    <li class="menu-item active">Three</li>
    <li class="menu-item">Four</li>
</ul>
li.menu-item { color: lightgrey; }
li.menu-item.active { color: red; }

Selectors can match against any [attribute] or [attribute value], not just id or class.


<p data-attr="true">One</p>
<p data-attr="false">Two</p>
<p data-attr="john-doe">Three</p>
<p data-attr="johnny-appleseed">Four</p>
<p data-attr="john-carter">Five</p>
<p data-attr="hello goodbye farewell">Six</p>
p[data-attr] { color: yellow; }
p[data-attr="false"] { color: red; }
p[data-attr*="john"] { color: lightgrey; }
p[data-attr^="johnny"] { color: blue; }
p[data-attr$="carter"] { color: gold; }
p[data-attr~="hello"] { color: violet; }

Selectors can match any descendant (obviously!) or just direct children, using >. What colour will ABC be? 


<ul id="nav">
    <li>One</li>
    <li>Two
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>Three</li>
</ul>
ul { color: red; }
ul#nav > li { color: green; }

Selectors can match based on previous siblings, using + or ~. What colour will each paragraph be?


<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>
h1 + p { color: red; }

What colour will each paragraph be?

<p>Just a paragraph.</p>
<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>
h1 ~ p { color: red; }

Selectors can match just the first (:first-child) or last (:last-child – except in IE 7/8) element in a collection. An typical example...


<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    border: 1px black solid;
}

li { padding: 10px; border-top: 1px black solid; }
li:first-child { border-top-width: 0; }

CSS can also create pseudoelements (but not in IE7!) in front of or behind an element, using :before and :after. An example... 


<p>World</p>
p:before {
    content: "Hello";
    color: red;
}

Pseudoelements are really weird (they don't exist in the DOM, the require the content property, etc.). Use them with caution!


Some CSS3 selectors we can't use just yet include :first-of-type, :last-of-type, :only-of-type, :only-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :root, :empty, :target, :enabled, :disabled, :not...

3. Selector Performance

The #1 thing to keep in mind is that CSS selectors are essentially queries that get evaluated from right to left!

Some suggestions:


– Avoid the universal selector (*)

– Don't overqualify #id or .class selectors

– Avoid the descendant selector

– Element selectors shouldn't contain a child selector

– Use the most specific selector possible (tags are bad!)

– Use child selectors "sparingly"


4. CSS3 Tricks

Rounded corners using border-radius 

Text shadows using, uh, text-shadow  

Box shadows and rgba() colours  

Images as borders

Background image sizes  

Multiple background images

Background gradients  

Transforms (2D and 3D)

Transitions

Animations

5. Sprites

Pros:


– reduced HTTP requests

– much improved image caching


Cons:


– difficult to maintain

– one sprite to rule them all is very hard


6. Web Fonts

No more Arial or Verdana!


@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	 url('webfont.woff') format('woff'), /* Modern Browsers */
	 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'MyWebFont', sans-serif; }

Or just use Google or Typekit.

But !


It developed into something really cool...



Font-Awesome

Problems:


– Bandwidth and HTTP requests

– Bold and italic

– Font formats

– Rights

– Flash of unstyled text

7. MORE Links

CodePen

Can I Use...

CSS-Tricks

Codrops Playground

IT'S JUST A LITTLE


{JAVASCRIPT}

Panaya - Presentation 1

By Amir Gal-Or

Panaya - Presentation 1

Various CSS tips, tricks and techniques for people who might not be born front-end developers.

  • 864