Almanac

Css Selectors	Css properties
A ::after / ::before :active Adjacent sibling Attribute	A align-content align-items align-self animation appearance
C :checked child Class	B backface-visibility background border border-collapse border-image border-radius bottom box-shadow box-sizing box-inside
D :default :disabled Descendant	C clear clip-path color column-count column-fill column-gap column-rule column-span column-width columns content counter-increment counter-reset cursor
E :empty :enabled	D direction display
F :first-line :first-child :first-of-type :focus	F filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-size font-stretch font-style font-variant font-weight
G General sibling	G grid-row / grid-column grid-row-align / grid-column-align grid-row-span / grid-column-span grid-rows / grid-columns
H :hover	H hanging-punctuation height hyphens
I :in-range :invalid ID	J Justify-content
M :matches	M margin max-height max-width min-height min-width
N :not(s) :nth-child :nth-last-child :nth-last-of-type :nth-of-type	O opacity order orphans outline overflow
O :only-child :only-of-type optional :out-of-range	p padding page-break prespective perspective-origin pointer-events position
P ::placeholder Pseudo Class Selector Pseudo Element	Q quotes
R :read-write / :read-only :required :root	R resize right
S ::selection	S scrollbar right
T :target :type	T tab-size text-align text-decoration text-indent text-overflow text-rendering text-shadow text-strolke text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition--timing-function
U Universal	U unicode-bidi user-select
V :valid :vsited	V vertical-align visible
	W White-space widows width word-break word-spacing
	Z z-index zoom

Built with Ionic: Songhop

Songhop, a super fast way to find new music, streams music that can be quickly flipped through using swipe gestures to interact with the Tinder-esque interface. The team behind Thinkster.io: Eric Simons, Albert Pai, and Matt Green, built the app, which is targeted at teens and young adults.

In early 2013, Simons, Pai, and Green wrote what is now the de facto tutorial on AngularJS and have since taught over 500K developers AngularJS. They originally heard about Ionic from the AngularJS community and agreed that it would take significantly more time to learn native languages than to learn how Ionic was set up. They built the entire Songhop app on top of Ionic’s UI elements and plugins: modals, dialogs, navigation controllers, swipe gestures, etc.

“We custom-skinned a lot of components, and it was unbelievably easy to do so,” says Simons. “The framework is absolutely fantastic, and the documentation and resources that Ionic provides is unreal. I’ve honestly never seen such comprehensive docs and resources for a framework or platform. Further, the design decisions that the Ionic team has made are very intuitive and straightforward, which makes it a lot easier to understand how things work.”

Sponsored: Stack – Task Management for Dev Teams Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time. I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. Could be different types of tasks or the state the task is in, whatever works. Then each task has it's own little world of people and conversation and todo's and stuff, if needed. So I might have a CSS-Tricks account, with a project for The Lodge, that has a column for Videos To Shoot, and each video is a task, and in the task I leave notes on what the plan is. Beautiful. Free for 30 days, no credit card required to get started. Super simple pricing model after that ($5/month per user). Stack

Search box in content move to fixed header

It's a cool effect particularly if used to make UX better and not to affix some dumb intrusive ad. Here's the GIF.

For live

http://codepen.io/chriscoyier/pen/AdaKr

How css selector works

Here's what that HTML file would be like

<!DOCTYPE html>
<html lang="en">

<head>
  <title>We're learning selectors!</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  
  <h1 id="yay">Yay</h1>

<body>

</html>


Id selectors

css 

#happy-cake {


}

<!-- WILL match -->
<div id="happy-cake"></div>

<!-- WILL match -->
<aside id="happy-cake"></aside>

<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>

<!-- Will NOT match -->

<div class="happy-cake">That's not an ID!</div>


ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win. That sounds good, but that's typically considered bad, because it's nice to have lower-specificity selectors that are easier to override when needed.


Class selectors

css

.module{


}

<!-- WILL match -->
<div class="module"></div>

<!-- WILL match -->
<aside class="country module iceland"></aside>

<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>

<!-- Will NOT match -->

<div class="bigmodule">Wrong class</div>

Class selectors are your friend. They are probably the most useful and versatile selectors out there. In part because they are well supported in all browsers. In part because you can add multiple classes (just separated by a space) on HTML elements. In part because there are JavaScript things you can do specifically for manipulating classes.


Tag selectors

css

h2{


}

<!-- WILL match -->

<h2>Hi, Mom</h2>

<main>

  <div>

     <!-- WILL match -->

     <h2>Anywhere</h2>

  </div>

</main>

<!-- Will NOT match -->

<div class="h2">Wrong tag, can't trick it</div>

<!-- Will NOT match -->

<h2class="yolo">Make sure that tag has a space after it!</h2>

Attribute selectors

css

[data-modal="open"]{

}

<!-- WILL match -->
<div data-modal="open"></div>

<!-- WILL match -->
<aside class='closed' data-modal='open'></aside>

<!-- Will NOT match -->
<div data-modal="false">Wrong value</div>

<!-- Will NOT match -->
<div data-modal>No value</div>

<!-- Will NOT match -->

<div data-modal-open>Wrong attribute</div>

Positional selectors

css

:nth-child(2){

}

<ul>

  <li>nope</li>

  <!-- WILL match -->

  <li>yep, I'm #2</li>

  <li>nope</li>

</ul>

Other pseudo selectors

css

:empty{

}

<!-- WILL match -->
<div></div>

<!-- WILL match -->
<aside data-blah><!-- nothin' --></aside>

<!-- Will NOT match -->
<div> </div>

<!-- Will NOT match -->
<div>

</div>

Leveling up

css

.module.news {
  /* Selects elements with BOTH of those classes */
}
#site-footer::after {
  /* Adds content after an element with that ID */
}
section[data-open] {
  /* Selects only section elements if they have this attribute */
}

.module > h2 {
  /* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
  /* Select p elements that are directly following an h2 element */
}
li ~ li {
  /* Select li elements that are siblings (and following) another li element. */

}

CSS Triggers

When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.

Paul Lewis did all the research on which properties do what. A good reference to help you think about what kind of changes you can make that are easy for the browser (thus fast) and what kind of changes are hard (thus slow).

Game of layout, paint and composite

CSS3 backface-visibility Property

The backface-visibility property is currently only supported in Internet Explorer 10+ and Firefox. Opera 15+, Chrome, and Safari support an alternative, the -webkit-backface-visibility property.

The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside.

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the "front" of an element no longer faces the screen. For instance, this would flip an element away from the screen:

Prefixes

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility.

Css syntax

backface-visibility: visible | hidden | initial | inherit;

Values

• visible (default) - the element will always be visible even when not facing the screen.
• hidden - the element is not visible when not facing the screen.
• inherit - the property will gets its value from the its parent element.
• initial - sets the property to its default, which is visible.

jsfiddle