CSS font stacks, developer FAQs & web standards
This page is part of a searchable archive of the Code Style site log. Technical implementation notes that shed light on when, why and how the site has evolved since 2000.
Follow the latest entries to the site log.
Completed a fundamental restructuring of the site stylesheets to work around CSS rendering issues in Internet Explorer 4, by creating a modular set of separate layout and livery styles. Updated Code Style CSS to outline the new scheme, which introduces seven new stylesheets:
Changes checked in multiple browsers and various minor adjustments made to the original styles, which are still available for reference: CSStandardImport.css and CSNN4Standard.css. Many generic declarations have been brought together in grouped selectors to aid consistency and centralisation of styles and many un-used rules abandoned, including declarations for ill-conceived .ClearAll, .Right and .NOBR classes.
During the style changes, numerous minor adjustments to the site markup were made to improve consistency of rendering between browsers, including the removal of the width attribute on the archive menu table at the foot of the site log page and addition of cellspacing and cellpadding attributes, and the removal of invalid alt attributes to the textarea element on the help request form.
Also removed an inappropriate margin-right: 25%; declaration for table in the Code Style font sampler Sampler.css stylesheet, which was breaking the page layout in Internet Explorer.
Added specific content type for Javascript files to root level .htaccess file:
# Serve correct type for Javascript
AddType "application/x-javascript; charset=iso-8859-1" js
Actions: Ask a question about this post, seek clarification or offer a correction.
Uploaded all unpublished media stylesheet test pages for final testing on Internet Explorer 3 before upgrading to IE4 to try to work around some bad CSS handling problems with the standard site stylesheet.
Actions: Ask a question about this post, seek clarification or offer a correction.
Deployed a second sub-version of the CSSSelector servlet under a different class name to test caching conditions with Opera 5.11. This version gives a compile-time Last-Modified header for the styles and an Expires date one week from the time of request. The Last-Modified and Expires times for the style change confirmation page are the request time, i.e. it expires immediately.
It seems that if Last-Modified headers are sent, Opera applies significantly more aggressive caching, such that forcing a reload of the XHTML page, does not reload the stylesheet it refers to. Only requesting the stylesheet servlet URL directly and then reloading it changes the style which is served and rendered in the browser.
Actions: Ask a question about this post, seek clarification or offer a correction.
Stripped down and re-built the CSSSelector servlet to deduce problems with the init() method on the production host. With Apache JServ's Servlet 2.0 API implementation, servlets must declare a servlet configuration argument and override the superclass init() method. Also added an UnavailableException:
public void init(ServletConfig config) throws ServletException{
super.init(config);
try{
// Initialisations
}
catch(Exception e){
// Log errors
throw new UnavailableException(this, e.getMessage());
}
}
Also re-worked deprecated getParameter() calls to use the request getParameterValues() method.
// See if a new stylesheet is set
String stylesheet = "";
String[] paramValues = req.getParameterValues("set");
if((paramValues!=null)&&(paramValues.length>=1)){
stylesheet = paramValues[0];// Get the first value only
}
Made final adjustments to the temporary demonstration page, CSS Selector, including exclusion of spidering robots for now and made available for trials.
Apparently the A:hover issue noted in the DOM1 visibility menus article has been corrected in the latest build of Mozilla. Added a note accordingly.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a CSProjectionPreview.css stylesheet to work with the CSSSelector servlet, based on CSPrintPreview.css, and made a few minor adjustments to the Netscape stylesheet, CSNN4Standard.css , and projection media stylesheet, CSProjection.css. Changed the included standfirst text in the CSSSelector demonstration pages to link back to the main selection page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added an ID selector to the alternative stylesheet, CSAlternate.css to hide from all but those browsers which support the position: fixed property.
/*
Sidebar scrolls with the page,
not supported by IE5.5 and below.
*/
#Sidebar{
color: #000;
background: #C9C;
margin-top: 1%;
margin-left: 0;
padding-left: 2%;
border-style: solid;
border-width: 1px;
border-color: #FCF #969 #636 #969;
}
/*
CSS2 ID selector not recognised by
non-supporting browsers and leaves
width 100% of body.
*/
div[id=Sidebar]{
position: fixed;
width: 14%;
top: 25%;
left: 0.5%;
}
Incorporated additional notes on cookie usage from p3p-Full.xml to the site Privacy statement.
Actions: Ask a question about this post, seek clarification or offer a correction.
A range of changes to the trial CSSSelector servlet, including a confirmation of the selected stylesheet name and the addition of P3P summary cookie headers:
// Set P3P header values
res.setHeader("P3P","CP=\"IDC DSP COR CUSi TAIa OUR NOR PRE\"");
Added a selection link to the standard Netscape 4 stylesheet, CSNN4Standard.css, on the demonstration sidebar, and made changes to the ServletUtilities class to add a nouriFooter() method which outputs a standard footer without the URI link.
Actions: Ask a question about this post, seek clarification or offer a correction.
Copied subject index styles (see 3rd September below) to the Netscape only stylesheet, CSNN4Standard.css.
Actions: Ask a question about this post, seek clarification or offer a correction.
Switched the What's New link on the standard sidebar and .Footbar menu include files to Site log, as the server logs show this is a more common entry point to the site and a greater interest area for visitors.
Standardised usage of the terms "Web site" and "home page" offline using Search and Replace. Also removed nested abbr markup from anchors throughout the site with the following replacement expression:
Search:
<a href="+[]">*[]+(<abbr title=")*[]+(">)*[]+(</abbr>)*[]</a>
Replace:
<a href="%1">%2%6%8\</a>
The styles applied to abbr and a had made link text ambiguous in Opera and Netscape 6. This replacement only replaces one abbreviation. If more than one abbreviation is present the replacement must be run repeatedly.
Addition of a space before the closing slash of <br /> elements in the article feedback forms to accommodate Netscape 4 (and possibly other browsers).
Actions: Ask a question about this post, seek clarification or offer a correction.
Created first W3C Platform for Privacy Preferences Project (P3P) policies, p3p.xml and p3p-Full.xml.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created first draft site subject index based on referring search engine search terms. Added some styles to the standard stylesheet for the alphabetic navigation and to signify section home pages:
.AlphaLinks{
color: #000;
background: #EEF;
padding: 0% 1%;
border: solid 1px #CCC;
text-align: center;
}
.Section{
font-weight: bold;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Removed the Back navigation from the Font sampler servlet, now version 1.4, as this was evidently removing users' selections from the font survey checkboxes.
Spent some time considering and developing wording around a reset button for the Code Style font sampler for those who just want results updates, including the addition of a .Inline class, for input elements in running text, and an .Accesskey class for underlining short keyboard shortcuts in browser usage instructions. Decided not to implement these versions for the time being.
Also made further adjustments to the ServletUtilities class to add a standard header template which takes a custom stylesheet argument, to work with the CSSSelector class.
Took a copy of the Code Style site log section and changed all references for it to work as a browse-able demonstration of the custom stylesheet servlet, CSSSelector. May rename it StyleSelect before trial publication. Created custom versions of the standard sidebar include file for stylesheet selection and a style include to reference the servlet. Also created a "stand alone" print preview stylesheet, CSPrintPreview.css, which imports CSStandard.css and CSPrint.css, to give the same effect as the separate link elements in the standard page.
Testing the CSS selector servlet brought to light several minor issues with the print stylesheet. Adjustments included making margin-right on the #Footer selector 20% as with most other text container elements.
Actions: Ask a question about this post, seek clarification or offer a correction.
Find technical implementation notes on all aspects of the Code Style site.
For a summary overview, see the annotated site log contents.
