{Carrer web log} ←

CSS Mobile Reset

Wednesday, November 17, 2010 { 12 Comments }

I’m not sure if the title of this project should be called CSS Reset or CSS Set or CSS Mobile Base. The goal is to provide default CSS for mobile devices.

I started with this objectives:

• It should be small


• It should reset only the necessary HTML elements


• Should set only the necessary HTML elements


• It should provide better typography solution

Few years ago I build Hartija CSS Print Framework, the great thing about Hartija is that you have very fast print ready page. The same thing I want to achieve with the Mobile Reset to have content ready fast solution.

It should be small

Internet connection for mobile phones are still expensive and slow so smaller CSS file will provide faster download and better user experience.

Reset only the necessary HTML elements

All the browser implement CSS reset by default. I don’t think that is always smart to reset the reset. If you building complete CSS Framework is OK to reset everything but in many cases it is better to reset just the main HTML elements or the critical HTML elements.

Set only the necessary HTML elements

After resetting some elements it would be nice to set some HTML elements optimized for mobile phones.
We want to images not to be bigger than the mobile screen or if one word is bigger than the screen the word should brake.

We should provide meaningful base typography solution

Have you tried reading from mobile phone without zooming? I suggest to start with bigger font size. I implement 16px default font size. Feel free to change it. I also picked Arial like default font. Sans-serif can work well in some older low resolution mobiles.

And here is CSS Mobile Reset:

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0; 
 border: 0;
}

body 
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

Download on GitHub

Demo1

Demo2



You can use CSS Mobile Reset with combination of Bulletproof CSS3 media queries.

Here is a Demo.

Any suggestions how CSS Reset can be improved?

12 Responses to “CSS Mobile Reset”

1. //  Mikko Ohtamaa // 11/17/2010

   Using pixel size fonts with mobile device is a hazard.
   
   I suggest you put in font-size: 1em and the font is not too small on high DPI displays.  

2. //  Vladimir // 11/17/2010

   @Mikko: I chose px because I'm not sure how the older phones work with ems, otherwise em are better.  

3. //  Unknown // 11/18/2010

   If older phones can't handle 'em' then they would just be ignored. So in theory what you could do is define both making sure the 'em' font size rule is defined last. However, I don't know if that starts to introduce complexities that breaks the core focus of your css reset for mobile devices.  

4. //  nLL // 11/18/2010

   There is no need to use
   font-family:Arial, sans-serif;
   as it doesn't exist on mobile phones  

5. //  Vladimir // 11/18/2010

   @nLL: I read somewhere that the older Opera mobile browsers doesn't support font family and they few default fonts. So the older browsers will ignore the font and use there fonts and that is not a problem. Newer browsers will render the font properly I hope. Unfortunately I have possibility the solution on few mobile phones.
   
   @all: I will appreciate your help if you could test this solution on your mobile phone.  

6. //  Beben Koben // 11/19/2010

   demo2 maybe is good...hihihi
   thanks my friend^^  

7. //  joneorange // 11/26/2010

   What about adding
   
   label,input,select,table,textarea,button {
   -webkit-appearance: none;
   }
   
   this clears mobile safaris own styles on form elements. That line has fixed issues for me with submit buttons.  

8. //  Vladimir // 11/29/2010

   @joneorange: I should make some tests first. But definitely can be useful. Thanks.  

9. //  Web Design Firm NJ // 12/12/2010

   Its very nice and amazing post..
   Thank you for the post..  

10. //  Hannes // 2/14/2011

    body,input,textarea,select,button { font-family:Arial, sans-serif; line-height:1.5;font-size:1em;}
    
    and remove it from body. Otherwise on desktop browsers, form elements don't get font settings.  

11. //  Brett Widmann // 2/25/2011

    This was really interesting! Thanks for posting.  

12. //  Unknown // 6/11/2012

    how about ading:
    body { text-rendering: optimizeLegibility; }
    html { -webkit-font-smoothing: antialiased; }
    
    and maybe:
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }  

Post a Comment

<< Home