CSS
Cascading Style Sheets are used to define the presentation layer of websites. How CSS works is not always self-evident, so many of these articles explain various aspects of using CSS.
CSS efficiency tip: use a single stylesheet file for multiple media
Instead of spreading CSS intended for different media types over several files, you can use @media rules to combine them into a single file and reduce the number of HTTP requests.
Specify a text colour for img elements
Make sure the alt text most browsers display when an image cannot be rendered is readable. If necessary, specify a text colour for images.
sIFR default CSS hides content from at least one screen reader
If you use the CSS that comes with sIFR, Apple’s VoiceOver screen reader will not read the replaced text. But there is a simple fix.
Forgotten CSS selectors
Due to lack of support in Internet Explorer 6, web developers have been avoiding some very useful CSS 2.1 selectors. It’s time to start using them.
Use a background image in your CSS? Remember to specify a backup colour.
Whenever you place text on top of a background image, check if the text is readable if the image is missing and specify a background colour if necessary.
Vendor-specific extensions are invalid CSS
Vendor-specific extensions, even if written according to the CSS 2.1 grammar, use property names and values that are not defined in the CSS specification and are invalid.
Remove the outline from links on :active only
Completely removing the outline from links makes it very difficult for people who do not use a mouse to see where the keyboard focus is. But there is a better way.
Page zoom does not mean the end of flexibility
The fact that most browsers now default to zooming the entire page instead of just changing text size does not take away the need for flexibility in web design.
Find and highlight HTML elements with FireFinder for FireBug
Robert Nyman’s FireFinder plugin for Firebug lets you quickly find and highlight HTML elements that match a CSS selector or XPath expression. Very handy.
Line wrapping text in legend elements
Making text in legend elements line wrap is tricky, but it can be done in most browsers.
CSS background images cannot and should not have alternate text
There is no way to specify alternate text for CSS background images. This is not a problem since background images should be used for presentational purposes only.
Hiding with CSS: Problems and solutions
Be aware that using display:none to hide elements will hide them from screen readers, and if you use JavaScript to show something, also use JavaScript to hide it.
Using an XML declaration triggers Quirks mode in IE 6
If you use an XHTML doctype with an XML declaration, Internet Explorer 6 will switch to Quirks mode and use an incorrect CSS box model.
It’s “class”, not “CSS class”
There is nothing called a “CSS class” in HTML or CSS, so please refer to values of the HTML class attribute as classes or class names instead.
Use CSS Diagnostics with Stylish to find bad HTML
Combining the concept of diagnostic CSS with the Stylish Firefox extension makes it easy to apply CSS that reveals invalid or deprecated HTML to any site you want.
Find inline CSS and JavaScript with Inline Code Finder
Inline Code Finder is a neat quality assurance tool that will find and highlight any elements that have inline events, inline styles, or javascript: links.
Reveal new window links and links to non-HTML files with a user stylesheet
By telling your browser to apply a user stylesheet you can highlight links that open in a new window or point to non-HTML documents, making them less obtrusive.
The order of link pseudo-classes matters
The order in which you define the different link states affects the result. My preferred order is :link, :visited, :hover, :focus, :active.
Specify a maximum width for em-based layouts
When creating layouts with an em-based width, specify a maximum width to avoid horizontal scrolling for users who increase text size.
The Art and Science of CSS (Book review)
Cameron Adams, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook get together to deliver some good tips on implementing design elements with CSS.
Page navigation
Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 | Page 8 | Page 9 | Page 10 | Page 11 | Page 12 | Page 13 | Page 14 | Page 15 | Page 16 | Page 17 | Page 18Sponsors
Authentic Jobs
Job openings from Authentic Jobs
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost