Sunday, April 6, 2014

CSS Cross Country Course - Level 2

Notes from Codeschool CSS Cross Country Course - Level 2

Clearing Floats

Clearing is necessary if:
- Floated items are taller than non-floated content (see img 1)
- All children are floating (see img 2)

If the other items inside of the container are in danger of not extending beyond that of the floating item, the parent container isn't going to automatically stretch to match the height of any floated item.

what it looks like when you don't clear a float
img 1: what it looks like when you don't clear a float, your float will drop down into subsequent content.
Also, if all the content within a container is floating, you'll need to clear that content as well.
what it looks like when you don't clear a floats
img 2: what it looks like when you don't clear a floats, your parent container doesn't surround floated items.

Three Ways to Clear Floats

- Clear with a subsequent element
- Manual clearing
- The clearfix (recommended)

Clear Options:

clear: left / right / both

How to Clear with a Subsequent Element (not recommended)

To clear using a subsequent element, target the element that comes after the item you floated, i.e. the subsequent element. In the example below, we are targeting the second div by giving it a class intro that tells it to clear the above container.

<!-- index.html -->
<div>
  <img src="ski.jpg" alt="skiing" />
  <p>To successfully ski, don't fall down.</p>
</div>
<div class="intro">
  <p>Whee!</p>
</div>

/* styles.css */
img {
  float: left;
}

.intro {
  clear: both;
}

Once we clear with a subsequent element, any floats from the previous container won't overlap any elements inside the subsequent container:
apply .intro to first element after floated item
apply .intro to first element after floated item
Why this method is not recommended:
- If you change the sequence of elements later, your clear will not work anymore.
- The background and border of the container holding the float do not extend to accommodate the floated item. In this image the blue box (our floated element) still hangs over the parent element's border, even though the subsequent element clears it:
why clearing with subsequent element isn't recommended
clearing a subsequent element will cause your background and/or border to be misaligned

Manual Clearing

With manual clearing, you add an empty element as a sibling of any floated item in that parent container. This will allow us to clear that container prior to it finishing out. This will make sure the background and border surround the floated element as well.

<!-- index.html -->
<div>
  <img src="ski.jpg" alt="skiing" />
  <p>Skiing is fun and stuff.</p>
  <div class="clear"></div>
</div>

/* styles.css */
.clear {
  clear: both;
}

Problems with manual clearing:
- Requires an empty element and clutters up your html
- May not be necessary later

Clear Floats i.e. the Clearfix

Adds a group class to the parent container so that any floated elements inside of it self clear. The container will automatically stretch to the height of any floated elements.

<!-- index.html -->
<div class="group">
  <img src="ski.jpg" alt="skiing" />
  <p>Skiing is fun and stuff.</p>
</div>

/* styles.css */
.group: before, .group: after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /* IE 6 & 7 */
}

Inheritance and Specificity

When you set a property for a parent element, any child elements will inherit those styles. i.e. Nested elements automatically inherit parent styles (unless you override it). In this example, the paragraph text will inherit the color from 'featured'.

<!-- index.html -->
<article class="featured'>
  <p>Some text</p>
</article>

/* styles.css */
.featured {
  color: #aba4ac;
}

If you need to override the inherited properties, you can use a nested selector.

<!-- index.html -->
<article class="featured'>
  <p>Some text</p>
</article>

/* styles.css */
.featured {
  color: #aba4ac;
}

.featured p {
  color: #fff;
}

--> Nesting the element selector overrides the color on .featured.

Dealing With Specificity

Where an ID and a class selector are trying to alter the same property. In the below example, the color for the ID selector would win because it is more specific than class.

<!-- index.html -->
<div id="content" class="featured">
  <p> Some interesting text.</p>
</div>

/* styles.css */
#content {
  color: #555;
}

.featured {
  color: # ccc;
}

Specificity (Priority of a Selector)

Specificity gives you a way to tell which selector has the highest priority, without going through a bunch of trial and error. Specificity is represented by comma delimited digits.
0,0,0,0. The first spot from the left is the most specific, whether there are any inline styles. Next, the total number of ID selectors, in the third spot from left, the total number of class selectors and the final and least specific is the total number of element selectors.

Specificity is visually represented with 4 comma delimited digits
Specificity is visually represented with 4 comma delimited digits
For example:
p { color: #fff; }  -->  0, 0, 0, 1
This is a simple element selector, so our comma delimited list has a 1 in the fourth position

.intro { color: #98c7d4; }  -->  0, 0, 1, 0
Class selector has a 1 in the 3rd position

#header { color: #44424b; }  -->  0, 1, 0, 0
ID selector has a 1 in the 2nd position

<h1 style="color: #000;> Some interesting text</h1>  --> 1, 0, 0, 0
An inline style has a 1 in the first position

p { color: #fff !important; }
Will override all 4 of the previous examples, and shouldn't be used unless absolutely necessary.

What to do when multiple styles are applied to the same element

Which style would win?

.intro p.article { color: #fff; }  -->  0, 0, 2, 1
This has 2 classes (intro and article) and 1 element (p)

.intro ul li.active { color: #98c7d4; } --> 0, 0, 2, 2
This has 2 classes(intro and active) and 2(ul and li) element selectors

In this case, since the highest priority digit is the same value (2), it will fall back to the next highest priority, the element position. Here the second example has a value of 2, which is greater than 1, meaning the second example will win. 

If we had a even a single ID selector, it would win out over the two examples above because of its higher specificity.

#header { color: #44246b; }  -->  0, 1, 0, 0
Because ID selectors so easily override classes and elements, its important to keep their use to a minimum. See this link for more info about avoiding the use of ID selectors: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

Dealing with Specificity

In this case we have a container with an id that sets a color on both paragraphs.

<!-- index.html -->
<section id="content">
  <p class="featured">Some interesting text.</p>
  <p>Some more interesting text.</p>
</section>

/* styles.css */
#content p {
  color: #000;
}

0, 1, 0, 1

If we have a paragraph that has a featured class and we want to give it a special color via that class, we can't simply give it a class selector. To change the color inherited from the ID selector, because ID is more specific. The correct way to fix this is is to use a nested class selector.

#content .featured {
  color: #777;
}

0, 1, 1, 0

This will work because 0, 1, 1, 0 wins over 0, 1, 0, 1

No comments:

Post a Comment