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.
Adjusted the styling for the media style sheet conformance guide tables to new table structures. Set the results cell font-size property to 77% and the not applicable style, .NA to 80%.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added media dependent style sheet test results for Internet Explorer 8 to all test case documents and browser conformance summary pages. Initially released the results in the original summary table format, then started to modify the table format to simplify for clearer comparison of browsers for a given test case. The original format of 3 test cases in a single results table was too complex and difficult to understand; the need for separate legends and keys for the table contents was shouting for attention. Also adjusted the server side include scheme for the test case results summaries to consolidate common copy across multiple media types and browsers.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a couple of links to the Site manager Anchor Points page: a robots.txt checker, using Xenu's Link Sleuth for SEO and a Six Apart guide to comment spam avoidance.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created font sampler text ads, Java text ads, Javascript text ads, HTML text ads and Code Style section text ads pages and added to the text ads price table and local navigation. Adapted the original all-in-one Text ad placement guide page to become the new Code Style section text ads page and retrospectively amended some site log entries to clarify.
Added the CSS newsletters and CSS news feeds pages to the CSS text ads content listing and made minor copy changes to several other placement guide pages. Changed the "top sites that link in" link on the home page text ads page to use the Alexa service rather than Yahoo! Changed the Site Manager text ads page to use a static .MenuBox style for the content list instead of .ScrollMenuBox. Also updated some of the top 10 search engine query tables.
Set the notes at the bottom of the text ad prices table in the smaller font size .Footnote class, and added modified dates beneath the top 10 search engine results tables in the same style throughout the subsection. Added the text ads FAQ to the subsection local navigation and made the navigation list of text ad placement guide pages into a server side include so it can be used in other locations, particularly in a couple of answers in the text ad FAQ.
Updated the page request share figures for each service area, and wrote some notes on how to obtain the figures from Google Analytics. Also updated the average unique visitors per month figure to 60,000 for the 12 months to March 2009.
| Text ads service area | Proportion of overall page requests |
|---|---|
| Home | 2.3% |
| CSS | 34.3% |
| FAQs | 31% |
| Java | 2.2% |
| Javascript | 3.5% |
| Site manager | 4.23% |
| Code Style | 1.0% |
| Font sampler | 19.8% |
| HTML | 0.8% |
Created a new text ad service table of contents server side include and added it to a new text ads service contents page, the Code Style section contents and top level Code Style site contents pages. Also added the text ad service pages to the Code Style subject index. Extracted the repeated alphabetical page navigation from the site subject index to create a server side include for easy modification.
Updated the Code Style section index page with a more concise summary of how the site grew up and what its for. Changed all remaining pages in the Code Style section to use section-specific local navigation menu rather than the generic site-wide local navigation include. This version has more relevant section-specific FAQ, newsletter and news feed links.
Ran Xenu's Link Sleuth and corrected a number of links to recently added HTML & XHTML section contents and the build better CSS font stacks article.
Created a working draft One percent better manifesto article.
Created a new form-based user interface for the Font stack builder servlet and font-size selector. Refactored the class to create a new set of convenience methods for appending hidden font-family input, font stack input or a font-size input as part of the main font stack manipulation controls.
private void appendGenericFontFamilyInput(StringBuffer buffer, String generic)
private void appendFontStackInput(StringBuffer buffer, List fontStack)
private void appendFontSizeInput(StringBuffer buffer, String fontSize)
Adjusted the table cell markup to minimise spaces between elements to avoid browser compatibility issues around the up, down and delete buttons. Each button is a form with an image submit button. Also adjusted the styling of the submit button for the new font size selector form to better align with the neighbouring select element.
form.FontSize input {
position: relative;
top: -0.1em;
left: 0em;
margin-left: 0.2em;
margin-top: 0em;
}
Added a robots.txt exclusion for the /faq/help/ directory which is referenced from every FAQ answer with hundreds of different query parts. It does not need to be indexed and would only add unnecessary server load when spidered.
Completed a new Build better CSS font stacks article and added to all local navigation, TOC, site map, subject index, section indexes and home page. Also added a link to the font stack builder servlet and updated the codestyle.jar through which it is delivered. Added the new article to the CSS newsletters subscription form. Added new .StackData and .CrossHeading styles to the CSPersistent.css style sheet to support the table formatting in the article.
.TestData, .StackData {
font-family: arial,
helvetica,
tahoma,
"arial narrow",
sans-serif;
}
.SuperData, .StackData, .SuperHeading,
.TestData, .SupraHeading, .CrossHeading {
font-size: smaller;
}
.NA{
font-size: 60%;
}
th, .SupraHeading, .CrossHeading {
text-align: left;
}
Also completed a font survey results update to coincide with the launch of the new article. Purged font survey submissions up to 1 January 2005 to maintain the rolling date range of 4 years. The survey now represents 2 years of the previous manually configured submissions and almost 2 years of automatic font survey applet submissions. Added a number of new fonts to the Linux font survey sample including URW Garamond L.
Removed the invalidation of spam font survey submissions from the fonts_purge_spammers.sql script. Now all submissions are applet based the font data is reliable, only the email address and notify boolean are cleared.
Added a copy element to the Ant build file target for codestyle.jar output to copy it to the local working copy of the production server library folder.
Actions: Ask a question about this post, seek clarification or offer a correction.
Reinstated Google Analytics tracking to the site HTTP 401 error page, which had been lost in the migration to the Lighttpd web server in December.
Corrected the layout of pre elements with Wide class in Firefox where the content was pushed down beneath the local navigation boxout. A recent change to support IE6 with a width of 65% is too great for Firefox. Added an override using a child selector to hide from IE6.
#Content pre.Wide {
width: 65%;
overflow: auto;
}
body > #Content pre.Wide {
width: auto;
margin-right: 31%;
overflow: auto;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the addition of site log Actions blocks to all remaining site log archive pages. The action blocks are based on the standard Help & FAQs actions, but use the site log ID instead of an FAQ ID for reference.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added new Java networking FAQ and Windows fonts FAQ to all relevant index pages and linking and brought many existing FAQs into line too; many had not been included in the section table of contents and other listings. Created a checklist reminder for all new content:
head element link set server side include
Finished the site manager text ads page with top 10 search engine results table and added to the advertising rates table and text ad benefits boxout menu. Moved some FAQ-specific top 10 links from the main CSS text ads and site manager listings to the FAQ text ads page.
Corrected a site name label error that was causing the site design FAQ newsletter to be omitted from the generated site manager newsletters subscription form include files.
Created a minimal Site design index page and added it to the link element set in the subsection head include files. Added the site design contents page news feed to the site manager news feeds TOC include. Also added various subject terms for the Site design FAQ to the site subject index page.
Added site log Actions blocks to most popular site log archive pages.
Actions: Ask a question about this post, seek clarification or offer a correction.
Archived December site log content and brought current log up to date. Updated favicon.ico with one based on the Eurostyle Twitter icon: .
Changed the text ad service call to action in the FaqMenuGenerator class. Checked in an SQL query (from 21 January 2009) to select all FAQ subscribers from the mailing list database. Added the new Windows font FAQ to the Web font sampler local navigation boxouts.
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.
