When you tap a link, button, or other active element with mobile safari, a brief dark grey highlight appears indicating the element was tapped. The colour of the highlight can be customised, or disabled with the following CSS rule. -webkit-tap-highlight-color: rgba(0,0,0,0); // disable
You can fully customise the style of checkboxes, radio buttons, select elements etc.. in webkit browsers. An example of a custom checkbox is show below. The key CSS rule is -webkit-appearance: none;. This then allows you style the element as a normal block element. Been webkit only, its safari and chrome browsers only at the [...]
Using the following CSS rules to have IE/webkit browsers apply an ellipsis on table cells text overflows is well documented. table { table-layout: fixed; } table td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } However, you cannot set a width on the last column of the table if you want IE6/7 to correctly apply [...]
Here is the cross browser technique I use to create CSS on the fly with script. I use this method when I want to manipulate certain page elements with CSS, but only when the user has JavaScript enabled. I usually place this code just after the opening body tag. <script type="text/javascript"> /* <![CDATA[ */ [...]
Use the following CSS rule to disable, or change the highlight colour when you tap on an element in safari running on the iOS platform. #element { -webkit-tap-highlight-color:rgba(0,0,0,0); }
A basic CSS template for use my barebones HTML layouts. /** * My main CSS * @author Your name dd/mm/yyyy * @requires reset.css */ /** ————————————————- layout **/ /** ————————————————- typography **/ /** ————————————————- forms **/ /** ————————————————- tables **/ /** ————————————————- lists **/
A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML5 Document with a sticky footer</title> <style>@import "css/reset.css"; </style> <style>@import "css/main.css"; </style> </head> <body> <div id="root"> <header> The page header </header> <section> <h1>Example</h1> <p>This is an example HTML document.</p> <p>Put your content here</p> </section> [...]
CSS3 brings us rounded corners with the CSS rule border-radius. At the time of writing, webkit and gecko based browsers offer this functionality with custom CSS rules. Gecko (Firefox): div { -moz-border-radius: 10px; } div { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; } Webkit (Safari, Chrome) div { -webkit-border-radius: 10px; } [...]
Modern browsers support RGBA colour definitions in CSS, for example: div { background: rgba(255,255,0,127); } You can simulate this in IE with something like the following code: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd204362,endColorstr=#dd204362); MSDN – DXImageTransform
Complient browsers use the background-color rule to set the colour of HR (horizontal rules). IE6 however uses the color rule. It will do no harm to add both the main style sheet.