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
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[ */ [...]
This is how you use IE conditional comments to target non-IE browsers: <!–[if !IE]><!–>This browser is NOT internet explorer<!–<![endif]–>
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> [...]
Internet Explorer 6/7 incorrectly handle a form submission with the <button/> element. Consider <button name=”action” value=”next”>Go to step 3</button> <button name=”action” value=”back”>Back to step 1</button> What should happen is the value of the button used clicked by the user should be posted with the action parameter. IE however posts the inner HTML of the button. [...]
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
If I ZIP up a web site via cpanel, then download and extract it to my MacBook, each of the resulting files has the quarantine extended attribute set. The attribute can be quickly deleted for each file with the following command run from Terminal. Assuming the files are in the the directory www. find www [...]
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.