css – Page 17 – Türker Yıldırım

Make a wide table scroll on a small screen

SnippetJune 20, 20131 min read

Grunt watch turns save-and-refresh into one step

NoteMay 16, 20132 min read

Compass compiles the stylesheets and JSHint checks the scripts, and both are run by hand until somebody forgets. grunt-contrib-watch is the piece that makes a task runner worth…

CSS transitions are cheaper than animating with jQuery

NoteApril 23, 20132 min read

$.animate() runs a timer, writes an inline style on every tick and reads the layout back to work out the next one. The browser is doing the same…

Media queries belong at the breakpoint, not at the device

NoteApril 4, 20132 min read

Breakpoints written as 320, 768 and 1024 are named after three devices that were current when the stylesheet was written. The layout does not break at those widths;…

z-index only works inside its own stacking context

NoteFebruary 5, 20132 min read

A dropdown with z-index: 9999 that still sits underneath the header is not a numbering problem. The two elements are being compared inside different stacking contexts, and the…

data attributes are readable from CSS as well as JavaScript

NoteJanuary 2, 20132 min read

A data-* attribute is usually introduced as a place to hang values for JavaScript to read. It is also an ordinary attribute, which means CSS can select on…

Clearfix with :after, and the float it stops collapsing

NoteOctober 31, 20122 min read

A container whose children are all floated has no height, because a float is out of the normal flow and the parent has nothing left to measure. The…

Bootstrap 2 responsive utilities only toggle display

NoteSeptember 25, 20122 min read

.hidden-phone reads like an instruction not to send something to a phone. It is three lines of CSS in a media query. The markup is still parsed, the…

Disable a submit button after the first click

SnippetSeptember 5, 20121 min read

Truncate a string to a number of words in JavaScript

SnippetAugust 14, 20121 min read