Resources CSS

Error: JavaScript is needed to render this site: please enable it.

This gives information about CSS, Cascading Style Sheets.

CSS Specifications 

CSS recommendations (i.e. specifications) are issued by the W3C (World-Wide Web Consortium). The specifications are:

CSS Validators 

Validators check to see whether CSS code is syntactically correct, i.e. is written in accordance with the specifications.

Some validators are:

CSS Code Checkers 

Code checkers (sometimes called syntax checkers or lint programs) check for problems in CSS code. Some checks are similar to those that validators do. Other checks are beyond the scope of validators, e.g. checking for browser incompatibilities.

Some CSS code checkers are:

Browser Support 

No browser completely and correctly implements any version of CSS; some modern browsers, however, come very close, e.g. Chrome, Edge, Firefox, Internet Explorer 9 (and later), SeaMonkey, Safari, Opera, and Vivaldi. NB​: some modern browsers implement the specifications more correctly when certain DOCTYPEs appear in HTML files [more.

I haven’t found up-to-date comprehensive information on how well browsers support CSS, but there is a lot of information available, some of which you can find in Further Information.

In general, you should use CSS rather than HTML to specify how content should appear, but understand that browser support is uneven. You should make pages that degrade nicely with less capable browsers, i.e. pages should work with such browsers, though perhaps not look as nice.

There are three special challenges to using CSS. First, some CSS features (e.g. positioning) degrade very badly with old browsers: you may have to eschew such CSS, or use different code for different browsers. Second, some CSS features (e.g. indentation of bulleted and numbered lists) require different CSS for different browsers. And third, some HTML — perhaps even non-standard HTML — may be necessary to ensure acceptable results with the oldest legacy browsers.

I myself avoid CSS features which are badly handled by older browsers.

Microsoft CSS Extensions 

Diagram of Scrollbar’s RegionsMicrosoft added attributes with IE5.5 to control the colours of scrollbars. These are:

For example, the scrollbar colours on this page are set using this CSS:

body, html { scrollbar-arrow-color:#0000cc; scrollbar-face-color:#c7d0e0; scrollbar-track-color:#e7f0fa; scrollbar-highlight-color:#e0e7f7; scrollbar-3dlight-color:#e0e7f7; scrollbar-shadow-color:#6699cc; scrollbar-darkshadow-color:#003366; }

NB​: many designers feel that it’s wrong to use these extensions because a the scrollbar styles are non-standard, b the designers believe that scrollbars should be part of the frame of the browser window, not part of the contents, or c the scrollbar styling as defined above is limited to a particular style of scrollbar.

NB​: it’s possible with these extensions to change the style of the scrollbars within the page, not only the scrollbars for the page. E.g., it’s possible to just change the style of the scrollbar for a scrollable box. It is somewhat easier to justify doing this, because such a scrollbar is physically within a page, not at the edge of the browser window, and should therefore arguably fit in with the colours of the page around it.

NB​: a CSS specification for styling scrollbars has been proposed (see CSS specification), but the styling is different and far more limited than the legacy Microsoft CSS.

Caution: if you choose to set the scrollbar colours, you should be very careful in the colours you set; many combinations of colours are ugly, many fail to produce a D-button effect, and some make scrolling hard for the user.

 Top of Page         Legal Notices