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.
Compiled multiple references into a new Anchor Points: DOCTYPE interpretation section and added further anchors to the subsection on CSS2 media stylesheets. Also made various minor additions to Anchor Points: Javascript & DOM, extended the Javascript FAQ and applied standard dl markup.
Moved the .MenuBox selector for margin-right from CSStdLayoutCommon.css into the grouped selector for the wide margin in CSStdLayoutStrict.css:
/*
Wide margin-right to float images
and box-outs there.
*/
#Content P, #Content OL, #Content UL,
#Content DL, #Content PRE, .MenuBox{
margin-right: 31%;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a link to Anchor Points: Recommended books to the site Help & FAQ. Added the Mac font survey results and Font sampler and survey FAQ to the link element navigation for the Code Style font sampler subsection.
Added a to query parameter to the AnchorPoints servlet to work in form-based navigation systems as required.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added the full CSS media monitor subsection to the What's new page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added nested list items to standard sidebar for the CSS media monitor and Code Style font sampler subsections. Added a style rule to CSStdLayoutCommon.css to keep the nested list compact and explicitly reduced all margins on the #Sidebar selector to zero:
UL.Menu UL{
margin-left: 1em;
padding-left: 0;
}
/*
Round cornered sidebar container.
*/
#Sidebar{
float: left;
width: 22%;
clear: none;
padding: 0;
margin: 0;
border: none;
}
Gave all simple pre elements the same wide margin-right value as p, ul and ol, and added a new .Wide class to those with line lengths greater than 40 characters to allow a greater width:
/*
Wide margin-right to float images
and box-outs there.
*/
#Content P, #Content OL, #Content UL,
#Content DL, #Content PRE{
margin-right: 31%;
}
/*
Don't compound the margins for
nested elements!
*/
#Content OL OL, #Content UL UL,
#Content OL P, #Content UL P,
#Content DD P, #Content DD OL,
#Content DD UL, #Content DD PRE,
#Content DD DL,
#Content .MenuBox UL,
#Content .MenuBox OL{
margin-right: 0;
}
/*
Longer preformatted lines take more
width.
*/
#Content PRE.Wide,
#Content DL DD PRE.Wide{
margin-right: 0;
}
Updated the generic meta keywords for the CSS media monitor subsection, ran a syntax check on all the test case media stylesheets and made various changes to the CSS2 media stylesheet glossary, CSS media monitor index CSS style guide and home page to publish the completed test suite.
Actions: Ask a question about this post, seek clarification or offer a correction.
Changed various document headings, titles and captions throughout the CSS media monitor subsection to emphasise browser conformance over compatibility. Switched all browser conformance summary documents to use the standard page layout styles, CSStandard.css rather than the wide stylesheet, CSWide.css.
Introduced clearer column heading labels to the media stylesheet browser conformance tables to better indicate the combination of @import and @media rules. Also added a floating media guide boxout menu with links to each conformance table, as seen here, and applied a generic standfirst introduction to the test suite.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the CSS2 media conformance table content for unsupported media types in the tested browsers, aural, braille, embossed, handheld, tty and tv, via server side include. All test case results for these media types are equivalent. Added all conformance tables as appendices to the test suite link navigation and links back to the CSS media monitor section from each test case document.
Added margin-top: 2em; to the .MediaTable selector for extra spacing in the Netscape 4 stylesheet, CSStdLayoutNN4.css. Also added a new CAPTION STRONG selector for these tables to make the table numbers greater contrast black on white.
Actions: Ask a question about this post, seek clarification or offer a correction.
Switched all offline versions of the CSS2 media stylesheet conformance summary pages to the standard layout style, changed all headings to emphasise conformance over compatibility and introduced clearer table heading text and formatting. Also corrected the test case 5 notes for Opera 3.62, which supports media dependent @import rules for media types.
Reduced font-size for the .SuperHeading class in the CSS media monitor browser conformance tables and made code within normal font-weight.
Actions: Ask a question about this post, seek clarification or offer a correction.
Uploaded the stylesheets with the new 1:2:1 horizontal layout for sidebar, body content and right margin: CSStdLayoutStrict.css and CSStdLayoutCommon.css.
Abandoned 303 see other response for HTTP 1.1 user agents in AnchorPoints servlet as this was incorrectly being logged as 200 OK by JServ/Apache. Formerly as below, does redirect, doesn't log properly:
// Check if a HTTP 1.0 user agent
if(protocol.indexOf("1.0")>-1){
res.sendRedirect(url);
}
else{// Use HTTP 1.1 status response
res.setStatus(res.SC_SEE_OTHER);
res.setHeader("Location",url);
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Created the first Mac font survey results page and added links to all relevant menus and index pages. Added an archival note to the abandoned CSStandardImport.css stylesheet because it is referred to throughout the site log archive.
Actions: Ask a question about this post, seek clarification or offer a correction.
Minimised margin properties on the main content containers, #Sidebar and #Content and changed element widths to give a horizontal layout closer to a 1:2:1 proportion in the offline copies of CSStdLayoutStrict.css and CSStdLayoutCommon.css. Adjusted margin-right on all relevant selectors to position text within the central 50% of the screen and minimised margin-top and padding-top on the body element.
CSStdLayoutStrict.css
#Header P, #Header H1{
margin-right: 24%;
margin-bottom: 0;
}
#Content{
float: right;
width: 75%;
padding: 0% 0% 0% 1.4%;
margin: 0;
}
/*
Wide margin-right to float images
and box-outs there.
*/
#Content P, #Content OL, #Content UL,
#Content DL{
margin-right: 31%;
}
CSStdLayoutCommon.css
BODY{
margin-top: 0;
padding-top: 0;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the all media browser conformance page with all current test results, including a summary paragraph on the implications of the tests. Re-wrote the Internet Explorer 5.5 test case summary to explain the complexities of test case 2.
Actions: Ask a question about this post, seek clarification or offer a correction.
Refined the wording of the table legend for the media stylesheet results tables to distinguish between conformance and compatibility. Completed the common standfirst text for this test suite with standard hyperlinks for the conformance tables, legend and abbreviations.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the set of browser test case files for the media stylesheet test pages and added these to all the test case documents via server side include and moved the outline of the expected behaviour in each case to the top of the page. Updated all test page menus to include fragment anchors to tie in to the new down-page navigation. Completed testing in Internet Explorer 5.5 and Opera 5.11.
The .Category class lost its text-align: right declaration in the recent re-organisation of stylesheets, so this is restored to CSStdLiveryCommon.css. Also added a new .C for compatible class for media stylesheet results tables.
TD.B, TD.C, TD.Y, TD.N, TD.NA, TD.W,
#Footbar, #Footer, .AlphaLinks,
.Caption, .ImgHeading,
.RadioData, .TestData, .SubHeading,
.SuperHeading{
text-align: center;
}
.C{
color: #000;
background: #FF0;
font-weight: bold;
}
Removed the margin-left declaration on the caption element in the CSWideImport.css stylesheet.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a set of test case summaries to be included in the full suite of media stylesheet test pages for each of the browsers tested. Case summaries use a more generic, descriptive approach which notes the exceptional cases, with fragment anchors for each browser. Also created a generic down-page navigation for each browser, to view source and the test page menu.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the update of the Code Style CSS overview and updated the Windows font survey results page, including a new "typical Windows font profile" table listing the top 14 ranked fonts. Removed the Marlett symbol font from the Windows font sampler and results as it has not Unicode mapping and cannot not render symbols reliably in browsers. Simplified the opening section of the survey pages by removing the distracting "see also" links.
Updated the site home page and CSS style guide index pages to highlight new versions of these articles. Ran a link check and corrected a few bad links.
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.
