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; }
<p id="id" class="class"><span>Hello World</span></p>
.class { color: red; }
p { color: black; }
.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)
#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; }
<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;
}
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 •
Images as borders •
Multiple background images •
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; }
But !
Problems:
– Bandwidth and HTTP requests
– Bold and italic
– Font formats
– Rights
– Flash of unstyled text
7. MORE Links
– CodePen
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