Single line comments

CSS uses the same "block comment" syntax as the C-like languages - you start a comment with  /*, and end it with */.

However, CSS is missing the "line comment" syntax that those languages have, where everything from // to the end of the line is commented out.

People have asked for this syntax to be added repeatedly, but unfortunately our hands our mostly tied - CSS minifiers don't know about line comments, so if we added it and the minifier removed all the linebreaks (as they tend to do), the line comment would accidentally comment out the entire rest of your stylesheet!

That said, CSS does actually already allow you to use //, after a fashion. It's not quite a line comment, but a next construct comment.

That is, whenever you use //, the next CSS construct - either declaration or block - will be "commented out". 

For example:

.foo {
  width: auto;
  // height: 500px;
  background: green;

}

Here, the // commented out the height declaration.


Similarly:

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }

}

Here, the // commented out the first @keyframes declaration.


Note, though, that if you try to use // just for writing comments into your stylesheet, you have to be careful - raw text isn't a CSS construct, so it'll look past that and comment out the next construct in your page:

// Do some stuff.
.foo { animation: bar 1s infinite; }

/* Whoops, the .foo block is commented out! */

Git Basics - Viewing the Commit History

Viewing the Commit History

After you have created several commits, or if you have cloned a repository with an existing commit history, you’ll probably want to look back to see what has happened. The most basic and powerful tool to do this is the git log command.

When you run git log in this project, you should get output that looks something like this:

$ git log

commit ca82a6dff817ec66f44342007202690a93763949

Author: Scott Chacon <schacon@gee-mail.com>

Date:   Mon Mar 17 21:52:11 2008 -0700

    changed the version number

commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7

Author: Scott Chacon <schacon@gee-mail.com>

Date:   Sat Mar 15 16:40:33 2008 -0700

    removed unnecessary test code

commit a11bef06a3f659402fe7563abf99ad00de2209e6

Author: Scott Chacon <schacon@gee-mail.com>

Date:   Sat Mar 15 10:31:28 2008 -0700

    first commit

Rotated Table Column Headers

Perhaps not a huge problem for two columns, but if you had 20 that would be very hard to navigate and a poor use of space. A better use of space is to rotate the headers so that the column width can be much narrower.

Rotating 90-degrees is too far though. It makes it hard to read.

Interestingly, we get just about the same amount of space saving if we rotate the headers 45 degrees instead, and they are much easier to read.

for live

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

Transform origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform

Summary

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Syntax

transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px 
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm

transform-origin: y-offset-keyword x-offset-keyword z-offset 

List of Mistakes in the Design of CSS

List of mistakes

• white-space: nowrap should be white-space: no-wrap
• vertical-align should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.
• vertical-align: middle should be text-middle because it's not really in the middle.
• Percentage heights should be calculated against fill-available rather than being undefined in auto situations.
• Table layout should be sane.
• Box-sizing should be border-box by default.
• background-size with one value should duplicate its value, not default the second one to auto.
• z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items).
• word-wrap should have been called overflow-wrap from the beginning because it confuses everybody.
• The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
• Partial collapsing of margins instead of weird rules to handle min/max-heights?
• Tables (and other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
• The currentcolor keyword should have a dash, current-color.
• There should have been a predictable color naming system instead of arbitrary X11 names.
• border-radius should have been border-corner.
• Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
• The hyphens property should be called hyphenate. (It's called hyphens because the XSL:FO people objected to hyphenate.)
• rgba() and hsla() should not exist, rgb() and hsl() should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).
• descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art