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.
Changed the CodeStyleTemplate class to reference the new "sutured" CSStandard.xcss style sheet. Also created new CSWide.xcss style sheet with same header and include format as CSStandard.xcss. Updated server side includes for style sheet links to reference new XCSS documents.
<?php
header('Content-Type: text/css; charset=iso-8859-1');
header('Cache-control: must-revalidate, max-age=604800');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 604800) . ' GMT'); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdFonts.css"); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdLayoutCommon.css"); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdLiveryCommon.css"); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSWideImport.css"); ?>
Actions: Ask a question about this post, seek clarification or offer a correction.
Added the PostgreSQL dropdb and createdb commands in the RestoreTestFontDatabase.sh and RestoreFontDatabase.sh scripts to automate the whole process. And created new SQL scripts to check for effective duplicate current font surveyline records. Updated all font survey results to correct duplicate entries for Lucida Sans, Andale Mono and LucidaBright in the Linux font survey sample and results table.
Extended the cache expiry time for Javascript and CSS files to 7 days from access and changed pattern match to file extensions to distinguish these from the new server parsed CSS type, .xcss.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a .xcss type to the Lighttpd configuration for server parsed CSS include files with an initial trial version CSStandard.xcss, which "sutures" together all formerly imported style sheets to minimise HTTP requests.
# Assign CGI handlers by extension
cgi.assign = (
".cgi" => "",
".php" => "/bin/php",
".shtml" => "/bin/php",
".pl" => "/bin/perl",
".py" => "/bin/python",
".rb" => "/bin/ruby",
".xcss" => "/bin/php"
)
static-file.exclude-extensions = ( ".shtml", ".php", ".pl", ".cgi", ".xcss" )
<?php header('Content-Type: text/css; charset=iso-8859-1'); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdFonts.css"); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdLayoutCommon.css"); ?>
<?php @ include($_SERVER['DOCUMENT_ROOT'] . "/styles/CSStdLiveryCommon.css"); ?>
Actions: Ask a question about this post, seek clarification or offer a correction.
Added many more checks to the font survey browser processing SQL script to distinguish browser types and different versions of Linux and Windows NT for closer analysis for a forthcoming article on the font survey applet object markup. Scripts distinguish 11 new browser versions, mostly Firefox variants, 13 Linux distributions, and multiple new versions of previously seen browsers.
Developed a new UserAgentSQLGenerator Java class to dynamically generate the browser check scripts, with a UserAgentSQLGenerator.bat script to run. The class generates a set of SQL update statements from an array of browser version numbers and names. Wrote some table alter scripts to increase the size of a couple of the browser database table fields to take larger browserversion numbers and os names. Used same approach with both cases: rename the existing field, create a new one by the original name, copy the data into the new field and delete the old field.
BEGIN WORK;
ALTER TABLE browser RENAME COLUMN browserversion TO old_browserversion;
ALTER TABLE browser ADD COLUMN browserversion char(16);
UPDATE browser set browserversion = old_browserversion;
ALTER TABLE browser DROP COLUMN old_browserversion;
COMMIT;
Also wrote a set of SQL scripts to select and list all browsers that have contributed to the font survey applet since it was introduced to the each of the Windows font survey (21st April 2007), the Mac font survey (12th May 2007) and Linux font survey (21st February 2009).
Set extended expiry dates for static content in Lighttpd configuration.
$HTTP["url"] =~ "^/images/.*" { expire.url = ( "" => "access 30 days" )}
$HTTP["url"] =~ "^/scripts/.*" { expire.url = ( "" => "access 7 days" )}
$HTTP["url"] =~ "^/styles/.*" { expire.url = ( "" => "access 7 days" )}
$HTTP["url"] =~ "^/w3c/.*" { expire.url = ( "" => "access 90 days" )}
$HTTP["url"] =~ ".*\.shtml" { expire.url = ( "" => "access 6 hours" )}
$HTTP["url"] =~ ".*\.txt" { expire.url = ( "" => "access 30 days" )}
$HTTP["url"] == "/favicon.ico" { expire.url = ( "" => "access 6 days" )}
Added several new FAQs and added an announcement page link to the home page action points block. Created a friendly redirect to the latest FAQs.
$HTTP["url"] == "/faq-2009-06-13" { url.redirect = ( "" => "http://www.codestyle.org/faq/Issued.shtml?year=2009&month=06&day=13" ) }
Corrected a couple of links in the site log. Set a full path on the rule for the font sampler import style sheet, Sampler.css:
@import url(/styles/font-family/SamplerImport.css);
Actions: Ask a question about this post, seek clarification or offer a correction.
Modified the home page tag line and heading to work with the new Palatino based font stack; changed the tag line to "CSS font stacks, media style sheets and web standards" and the page heading to "Home to six hundred developer FAQs", to keep the "home" element with a stronger message. Also shortened the sub-head in the Web font sampler local navigation to "Better font stacks" to fit with slightly wider font.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added Google Chrome to the CSS media monitor test results summaries and test case documents. Created new versions of the media monitor calls to action and included them in the subsection index, CSS style guide section index and added an action point to the home page.
Updated all font survey results and the screen shot images of the top 40 Windows fonts with standard font smoothing. Many are too small at normal font size for font smoothing to take effect. Also added new screen shot images for Kartika, MS Reference Sans Serif, Sylfaen and Vrinda.
Latest: Build a better CSS font stack with our font survey results:
Updated the font survey database and submission file templates to include 20 new Mac fonts identified from font survey applet submissions since May 2007.
Extracted all font-related CSS rules to a new CSStdFonts.css style sheet and consolidated them all into serif, sans-serif and monospace group selectors for font-family, with other collective rules for font-size, font-weight, line-height and letter-spacing. Moved all relevant declarations from CSPersistent.css and CSStdLiveryCommon.css to the new fonts style sheet. Modified the CSStandard.css and CSWide.css style sheets to import the new CSStdFonts.css before the layout and livery style sheets.
@import "/styles/CSStdFonts.css";
@import "/styles/CSStdLayoutCommon.css";
@import "/styles/CSStdLiveryCommon.css";
Created a new Palatino based font stack for headings and body copy, and a simple Arial-Helvetica font stack for navigation elements. Reduced the margin-top on the .URI class to adjust for the new font stack.
.URI {
margin-top: 0.4em;
margin-bottom: 0em;
}
Adapted the #Header area rules to work around excessive height in Internet Explorer 6 by overriding the height with a min-height and height: auto declaration for conforming user agents.
#Header {
height: 70px;
width: 100%;
margin-top: 3em;
margin-bottom: 1em;
}
body > #Header {
min-height: 70px;
height: auto;
}
Added margin-bottom to unordered lists in FAQ answers:
#Content dl.FAQ ul {
margin-bottom: 1em;
}
And increased the margin above definition terms in table of contents definition lists.
dl.TOC dt {
margin-top: 1em;
}
Made the colour of abbreviations and acronyms slightly lighter and added code to the group selector to make it slightly darker blue. Also set pre markup darker and abandoned the "Wide" class pre element styles to make standard pre content scroll if it overflows.
abbr, acronym, code {
color: #009;
background: transparent;
}
Wrote an outline draft article on font stack builder enhancement with unobtrusive Javascript, and created an HTTP 503, service not available, error page for Lighttpd for when the Tomcat servlet container is taken down temporarily to make code changes. Also added various CSS anchor points 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.
