The Style

shichuan edited this page Apr 13, 2012 · 9 revisions

Mobile helper class and media query

We use CSS bubbling up for mobile first responsive design

 * Media queries for responsive design 

/* Styles for desktop and large screen ----------- */

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
  /* Styles */

/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */

Cross-browser prevent text resize

body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;

Prevent callout

.nocallout {-webkit-touch-callout: none;}

HTML5 contenteditable attribute on mobile

textarea.contenteditable {-webkit-appearance: none;}

S60 3.x and 5.0 devices which animated gif fix

.displaynone{position: absolute; left: -100%;}

Text overflow with ellipsis

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

Tip (only if you care about older IEs) - Normalize em-size for BlackBerry OS6 (issue #85)

All browsers in the universe (that I know of) use a default em-size of 16px. The only exception to this rule is BlackBerry OS6 which uses different default font-sizes on different devices (22px and even 17px). This causes serious layout issues in em-based layouts on these devices. The way to solve this is to put the following code into the stylesheet:

:root {
  font-size: 16px;

This will normalize the base font-size for all current and future browsers. It does remove the ability to adjust the font-size in the browser in IE9 though so you might want to put the code in a somewhat restricting mediaquery:

@media all and (max-width: 480px) {
    :root {
        font-size: 16px;