I have learned so many useless tricks about CSS, like this one.

You have to use different rules to style placeholder, otherwise, they will be ignored. Also reported by treehouse.

A stylus example to hide the placeholder when the learner class exists

  .learner
    &::-webkit-input-placeholder
      color white
    &:-moz-placeholder
      color white
    &::-moz-placeholder
      color white
    &:-ms-input-placeholder
      color white

I got everything to work in most browsers, but not always in IE11. Apparently, IE 11 ignores width/height inside display:table-cell.

The solution that almost worked, see CodePen. It works in Chrome (left), IE10(middle), but NOT in IE11(right)

<div class="container">
 <div class="cell">
 <img src="http://i.imgur.com/kpRaL9K.jpg"/>
 </div>
</div>

.container {
width:100px;
height:100px;
display: table;
table-layout: fixed; /*crucial for IE*/
border: 1px solid black;
}
.cell {
display: table-cell;
height:100px;
vertical-align: middle;
text-align:center;
}

img {
max-width: 100%;
max-height: 100%;
margin: auto;
}

Such a pain…

http://bavotasan.com/2011/style-select-box-using-only-css/

Trying to consolidate my css preprocessor to one system – stylus.js

Surprisingly easy to convert from scss to stylus because:

– Stylus supports native css syntax

– Nib provides a lot of mixins

– More mixins can be added easily

Some notes:

– To compile scss, I used to do:

sass --compass --watch css/gadget.scss:gadget.css

– To compile stylus, I do:

stylus -u nib -w css/gadget.styl -o .

– It takes me about half a hour to figure out the right syntax for output to current folder is “-o .”!!!

One common problem is that when children divs are floated inside a parent div, the parent div is not aware of the height of children divs.

The code to begin with:

<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
</div>

.parent {
  border: 1px solid black;
}
.child {
  float: left;
}

Solution one – change the css of the parent to

.parent {
  border: 1px solid black;
  overflow: auto;
  width: 100%;
}

Solution two – add an extra div, and apply clear:both

<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="clearfix"></div>
</div>

.parent {
  border: 1px solid black;
}
.child {
  float: left;
}
.clearfix {
  clear: both;
}

Come across a blog post talking about functional CSS. It cleared a lot of confusion I had with CSS conventions.

– Namespace your classess with string prefixes, faking scope and minimizing surprises
– Use composition instead of overriding rules
– Try avoid enforcing DOM structure

First way with line-height (not sure about cross-browser)

HTML:

<div id="header"><div class="center">header</div></div>

CSS:

#header {
  height: 100px;
  background: gray;
  text-align: center;
  line-height: 100px;
}

Second way, negative margins

#header {
  background: gray;
  position: relative;
  height: 100px;
  text-align: center;
}

.center {
  background: pink;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
}

Third way, display:table with display:table-cell.

#header {
  display: table;
  height: 100px;
}

.center {
  display: table-cell;
  vertical-align: middle;
}

Third way to align both vertically and horizontally.

#header {
  display: table;
  height: 100px;
  width: 100%;
}

.center {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}

Further read: http://www.vanseodesign.com/css/vertical-centering/

Our html content:

<div id="sidebar">sidebar</div>
<div id="content">
This is the beginning of content div.

 <img class="cat-img" alt="" src="http://eofdreams.com/data_images/dreams/cat/cat-08.jpg" />

This is a very large page of content.

I mean. Really.

Really really large.</div>

First way (not sure about cross-browser):

#sidebar {
background: pink;
float: left;
}

#content {
background: yellow;
overflow: hidden;
}

First way, complete version. Note both html and body needs to have height:100%

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#sidebar {
  background: pink;
  float: left;
  height: 100%;
}

#content {
  background: yellow;
  overflow: hidden;
  height: 100%;
}

Second way, use display:table, and display:table-cell. Bonus point: now you can use vertical-align:middle to vertical-align text in #sidebar.
Note:

• Vertical-align on a display:table-cell means where to display INNER content relative to the height of the table-cell.
• Vertical-align on a display:inline-block means where to display NEIGHBOURS relative to the height of the inline-block.

body {
  display: table;
  margin: 0;
}

#sidebar {
  display: table-cell;
  background: yellow;
}

#content {
  display: table-cell;
  background: gray;
}

Third way, use flex. Only available in modern browsers. But allow each children to distribute according to flex-ratios
. Check compatibility with http://caniuse.com/

#page {
 display: -webkit-flex;
 -webkit-flex-direction: row;
}

#sidebar {
 background: pink;
 -webkit-flex: 1;
}

#content {
 background: gray;
 -webkit-flex: 2;
}

Add this awesome reference: http://www.boutell.com/newfaq/creating/threecolumnlayout.html