html – Page 15 – Türker Yıldırım

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;…

Detect when an image has finished loading

SnippetApril 3, 20131 min read

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…

jQuery.data() and the data- attribute are two different stores

NoteDecember 10, 20122 min read

.data() reads a data- attribute the first time it is asked and then caches the value in jQuery’s own store, keyed off an expando property on the element.…

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

Media queries do nothing without the viewport meta tag

NoteApril 25, 20122 min read

A stylesheet full of correct breakpoints that does nothing on an actual phone is almost always this. Mobile Safari and the stock Android browser default to a 980px…