Pro CSS for High Traffic Websites

Aside

Apress has just released a book called “Pro CSS for High Traffic Websites”, written by by Antony KennedyInayaili de Leon (ISBN-13: 978-1-4302-3288-9 –  400pp ).

The book covers the development processes required to smoothly set up an easy-to-maintain CSS framework across a large-volume website and to keep the code reusable and modular. It also looks at the business challenges of keeping branding consistent across a major website and sustaining performance at a premium level through traffic spikes and across all browsers. Defensive coding is considered for sites with third-party code or advertising requirements. It also covers keeping CSS accessible for all viewers, and examines some advanced dynamic CSS techniques.

What you’ll learn from this book:

  • The value of process
  • Making reusable, robust, and modular CSS
  • How to maximize the performance of your site
  • Integrating with third parties
  • How to keep branding consistent
  • Best practices for cross-browser and accessible CSS
  • Dynamic CSS techniques

Who this book is for:

This book is for Web developers building and maintaining premium, successful, high-traffic websites using web standards. This book will also help team leaders responsible for code that will be shared over multiple projects, as well as project managers with a high churn of contract staff.

CSS2 stylesheet for XHTML 2

Aside

@namespace url("http://www.w3.org/2002/06/xhtml2/");
/* A sample style sheet for XHTML 2.0
This style sheet describes a very incomplete, sample rendering of
XHTML 2.0 elements.
Editor: Masayasu Ishikawa
Revision: $Id: xhtml2.css,v 1.1.2.13 2006/01/13 15:06:29 ahby Exp $
*/
/* new elements */
section, h, nl, label, l, blockcode, separator, di
{ display: block; }
section, h, nl, label, l, blockcode, di
{ unicode-bidi: embed }
nl { margin: 1.33em 0 }
summary, standby, handler
{ display: none }
blockcode { font-family: monospace; white-space: pre }
separator { border-bottom: thin black solid; border: 1px;
inset; width 100%}
h { display: block; font-weight: bolder; font-family: sans-serif }
h1, h2, h3, h4, h5, h6
{ font-family: sans-serif; font-weight: bolder }
body h, h1 {
font-size: 2em;
margin: .67em 0;
}
section h, h2 {
font-size: 1.5em;
margin: .83em 0;
}
section section h, h3 {
font-size: 1.17em;
margin: 1em 0;
}
section section section h, h4, p, blockquote, ul, ol, dl
{ margin: 1.33em 0; }
section section section section h, h5 {
font-size: .83em;
line-height: 1.17em;
margin: 1.67em 0;
}
section section section section section h, h6 {
font-size: .67em;
margin: 2.33em 0;
}
*[edit="deleted"] { display: none }
/* no special presentation by default
*[edit="inserted"] { }
*[edit="changed"] { }
*[edit="moved"] { }
*/
/* experimental navigation list style */
nl {
height: 1.5em;
overflow: hidden;
margin: 0;
line-height: normal !important;
white-space: nowrap;
text-align: start;
cursor: default;
border-width: 2px !important;
border-style: inset !important;
vertical-align: baseline;
padding: 0;
}
nl:hover { height: auto; overflow: visible; }
nl > li, nl > label {
display: block;
min-height: 1em;
line-height: normal !important;
}
nl > li, nl > label {
padding: 0 5px 0 3px;
}
nl > li {
margin-left: 1em;
}
nl > label {
font-weight: bold;
}
nl > nl > label {
display: block;
line-height: normal !important;
font-style: italic;
font-weight: bold;
}
nl > nl > li {
padding-left: 2em;
font-style: normal;
font-weight: normal;
}
/* inherited elements */
html, body, div, p, h1, h2, h3, h4, h5, h6,
address, blockquote, pre, ol, ul, dl, dt, dd
{ display: block }
li { display: list-item }
head, style, link, meta
{ display: none }
table { display: table;
border-spacing: 0;
border-top: thin black solid;
border-left: thin black solid }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell;
border-right: thin black solid;
border-bottom: thin black solid;
padding 2px }
caption { display: table-caption }
table:hover summary { display: block }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { padding: 8px; line-height: 1.2 }
strong { font-weight: bolder }
blockquote { margin-left: 4em; margin-right: 4em }
cite, em, q, var, address
{ font-style: italic }
pre code, kbd, samp
{ font-family: monospace }
pre { white-space: pre }
sub, sup { font-size: smaller }
sub { vertical-align: sub }
sup { vertical-align: super }
ol, ul, dd { margin-left: 4em }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol
{ margin-top: 0; margin-bottom: 0 }
abbr[title] { border-bottom: dotted 1px }
:link { text-decoration: underline; color: blue; }
:focus { outline: thin dotted invert }
/* Hover effects should be default */
:link:hover,:link:visited { color: #b7f }
/* begin bidirectionality settings (do not change) */
*[dir="ltr"] { direction: ltr; unicode-bidi: embed }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed }
*[dir="lro"] { direction: ltr; unicode-bidi: bidi-override }
*[dir="rlo"] { direction: rtl; unicode-bidi: bidi-override }
/* block-level elements */
body, div, p, hr, h1, h2, h3, h4, h5, h6,
address, blockquote, pre, ol, ul, li, di, dt, dd,
table, thead, tbody, tfoot, tr, td, th,
col, colgroup, caption, object, summary, standby, blockcode
{ unicode-bidi: embed }
/* end bidi settings */
/* end xhtml2.css */

Time for uniform CSS3

Aside

When you are using CSS 3 you already know that most of the time you need to use settings in triplo (three times) or sometimes even four times!!!
With this I mean special codes for Firefox, Opera, Chrome and Safari/IE9.

I have included a little piece of code to illutrate;

-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;

This bit is compatible with all 5 browsers and needs 3 lines of the same thing!
There are tags around which you have to specify four times.

I think its time to stick to the standards.
Then my example above will look a bit shorter;

border-radius: 1px;

Why would you program everything multiple times? We all have better stuff to do. Like introducing more coffee breaks a day to celebrate that your working efficiencient. Why bother with things like CDN and minification if you still have to write good code multiple times.

 

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Aside

Next month Apress will publish the book “Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development”.
I am going to review this book on my website in august.
I already had a sneak peak at the book and I can say it looks very promissing!

If you want to pre-order or buy the book, click the image below.
If you want to know more about the book have a look at www.apress.com/book/view/1430227907

What you’ll learn from the book:

  • How the HTML5 specification has evolved
  • How to develop cutting-edge web applications using new HTML5 features like WebSockets, Geolocation, Web Storage, Canvas, and Audio and Video.
  • Which features are available in browsers today