1


It's jUST A LITTLE


{CSS}

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...

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; }

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

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"


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

5. Sprites

Pros:


– reduced HTTP requests

– much improved image caching


Cons:


– difficult to maintain

– one sprite to rule them all is very hard


7. MORE Links

CodePen

Can I Use...

CSS-Tricks

Codrops Playground

IT'S JUST A LITTLE


(JAVASCRIPT)

Some Cool(?) Stuff JS has

HOISTING



Riddle me this...


(function() {
   var a = "initial";
   if(a) {
      function f() { console.log("1"));
   } else {
      function f() { console.log("2"));
   }
   f();
})()

what do you think will happen ?

What actually happens ?


JavaScript use (mysterious) "declaration hoisting"

All function and variable declarations are moved to the top of their containing scope :\

(function() {
   console.log(a) // prints undefined
   var a = "initial";
})()

More to fear from...


(function() {
   console.log(typeof greet); // ?
   greet();                   // ?

   function greet() {
      alert("hello!");
   }
})()

(function() {
   console.log(typeof greet); // ?
   greet();                   // ?

   var greet = function() {
      alert("hello!");
   }
})()

MORE TO FEAR FROM...


(function() {
   console.log(typeof greet); // prints "function"
   greet();                   // alerts "hello"

   function greet() {
      alert("hello!");
   }
})()

(function() {
   console.log(typeof greet); // prints "undefined"
   greet();                   // ERROR !!!!!! - greet is not a function :\

   var greet = function() {
      alert("hello!");
   }
})()

So what HAPPENed now ?


in reality a declarations like
var greet = function() {
   alert("hello!");
}

var a = 5;
get split into 2 statements
  • declaration - which is hoisted to the top of the function
  • assignment - still happens at expected location

The exception are method declaration:
function greet() {
   alert("hello!");
}

So what is it good for ?





next time...

Some good practices

== vs. ===


the == operator does type coercion, with a self-invented algorithm.

following statements are all considered true:
[] == false
[] == ![]
3 == "03"
if one of these occurs in an innocent-looking statement such as a==b...

more interesting examples:
'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true


"Not A number" ?

"NaN" is a special value of the "Number" type.
It represents ANY of the "Not a number" values (∞, -∞,1/∞...)

it also has the unique property of not being equal to anything - including itself !!!
NaN === NaN // false :/
Nan !== NaN // true :\

So - simply - don't do that use "isNaN" method (ES5)
if(isNaN(foo)) {
   // ...
}

if(isNaN(NaN)) {
   // ...
}

Title

PANAYA - KNLG-SHRNG - 1/01/2015

By Amir Gal-Or

PANAYA - KNLG-SHRNG - 1/01/2015

Stuff....

  • 673