CSS font stacks, media style sheets & 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 link navigation include files for all current sections and added references to the CSS style guide section, and CSS media monitor and Code Style site log subsections and articles. Brought the Netscape 4 proportional headings article and test page up to date for inclusion in the FAQ CSS section. Also corrected repeated id attribute error in included article feedback form. Finally uploaded all changes and additions applied since March 10 to live site.
Actions: Ask a question about this post, seek clarification or offer a correction.
Further refined and started documenting the link element navigation in the CSS section to build towards an article for the HTML section and to support the site help pages. Developed a CSS style guide contents page, with an inclusion for the media stylesheet subsection contents. Established a toc- file prefix for included tables of contents.
Added new declarations to format nested h3 and ul elements in tables of contents:
DL.TOC DD H3{
margin-left: 5%;
}
DL.TOC DD UL{
margin-left: 12%;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Restructured the Anchor Points: HTML page to follow the pattern established for CSS, reviewed and added further notes on the linked resources. Separated out the validators and object links into included files for use in the Anchor Points: CSS page and the forthcoming Flash object article and added an HTML link to the Anchor Points navigation menu.
Actions: Ask a question about this post, seek clarification or offer a correction.
Reviewed and revised editorial text, validated markup, checked styles and included navigation on all new pages:
Also adjusted the stylesheet declarations for the new #Footbar navigation and created a simpler version for Netscape 4. Added #Footbar markup to all relevant footer- include files.
Standardised section, subsection and article level link navigation include files for CSS as a model for other sections.
Actions: Ask a question about this post, seek clarification or offer a correction.
Abandoned emulation of the main site layout for Netscape 4, problems with dl elements in the #Content area destroying the float finally tipped the balance. Greatly simplified the Netscape stylesheet, CSNN4Standard.css, and made the style warning link visible for this browser. Also changed the included markup to make CSWide.css the primary stylesheet where used, but which now imports the CSStandardImport.css and CSWideImport.css (the former CSWide.css stylesheet).
Restructured the Site log file naming scheme to remove redundant log- prefixes, renamed all files and hyperlinks. Also added permanent redirects from the old URLs to the new ones.
Restructured file naming scheme for currently unpublished documents to avoid subsequent changes and drafted some notes on the subject for a future article. Established a range of standard section-specific file names which will apply across the site for compilation into the final FAQ, Glossary and Anchor Points sections, and for link navigation:
Contents.shtml
FAQ.shtml
AnchorPoints.shtml
The main dilemmas were over the naming and location of server side include files, but ultimately decided that any section-, subsection- or article-specific includes should be in the working directory for the rest of the set. Also decided not to recursively include files, with limited exceptions, so most include files have a .htm extension.
The two exceptions to the recursive inclusion rule are for document footers, which require LAST_MODIFIED, DOCUMENT_URI and HTTP_HOST inclusion for hyperlinks, and generic forms, which require HTTP_REFERRER inclusion for reference to the relevant source articles.
The consolidated prefix scheme for key includes is as follows:
meta-
meta element content, such as meta-Keywords.htm.
menu-
menu-Section.htm
links-
link navigation elements, such as links-Subsection.htm and links-Projection.htm
standfirst-
.Standfirst paragraph elements which are repeated throughout sections like this one, e.g. standfirst-Subsection.htm.
anchors-
anchors-Subsection.htm.
footer-
footer-XHTML.shtml.
These prefixes complement previously established types as follows:
form-
Actions: Ask a question about this post, seek clarification or offer a correction.
Started drafting some link navigation elements as server side include files for specific article sets, sections and subsections following W3C recommended link types. Requires an overall site help and copyright page to complete, but current working rel attributes include: section, start, bookmark, chapter, glossary, index, contents, next and prev. Prepared draft glossary and table of contents pages for projection media stylesheet article set and similar skeleton documents for the rest of the CSS section.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a custom error 500 page, internal server error, including an error report form and configuration notes to encourage prompt notification if such problems arise.
Actions: Ask a question about this post, seek clarification or offer a correction.
Started re-structuring the external anchors section file naming to establish a more logical and extensible structure as part of a general review of site structure, directory and file naming. Also completed the media dependent style sheet glossary.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the reformatting of all source files to indent all block level elements by two spaces and uploaded. Note that included files used at different levels of element nesting will generate at least two spaces indentation or more.
Actions: Ask a question about this post, seek clarification or offer a correction.
Web server logs showed several bad stylesheet requests from Internet Explorer 5 for media dependent @import rules in the CSS level 2 media stylesheet test pages, where IE 5.0 and 5.01 on Windows NT incorrectly request non-existent URLs like url(print-Test5.2.css)%20print, see print media example 5 and projection media example 5. Added notes to all relevant test pages and articles.
Removed the nested big elements within the .URI paragraph class and replaced all <big class="CS">Code Style</big> markup with <span class="CS">Code Style</span> to hold true to the claim that no presentational markup is used throughout the site in Code Style CSS. Changed .CS and .URI CSS declarations accordingly:
.URI{
margin: 1% 20% 0% 0%;
font-size: 113%;
font-weight: normal;
font-family: "times new roman",
times,
serif;
}
.CS{
color: #039;
background: none;
text-transform: lowercase;
white-space: nowrap;
font-size: 113%;
font-style: normal;
font-weight: normal;
font-family: "times new roman",
roman,
serif;
}
Added 303 "see other" status redirects to the main site .htaccess file for some common broken links from news archives and readers etc. where long lines are wrapped before or after hyphens.
Also opened a sidebar link up to the About Code Style page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the second draft of Code Style CSS and added it to the home page preview article links. Also added a table of contents definition list element to the custom 404 error page to highlight some of the incidental items down the page, links to this new article, the most popular requests, the 404 configuration article and feedback.
Actions: Ask a question about this post, seek clarification or offer a correction.
Cut the growing overview of the Code Style stylesheets out of the custom 404 error page and built it into a first draft Code Style CSS article.
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.
