Tag Archives: CSS

CSS first-letter problem with display:inline

According to w3.org first-letter pseudo class works only with block level elements. Here is a paragraph from w3:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

Code with label that works across all browsers:
label:first-letter {text-decoration:underline}

Note, that there should be a space character between first-letter and curly bracket. Otherwise it will not work in IE6. So if you want to punish IE (or your users), use:

Things that will make your website much faster

What will make my website faster? How to optimize page load time? How to make web site appear to load faster for end user?

Updated Feb 9, 2011.

This is excerpt from article: How big HTML images / CSS / JS / png / etc. should be to fit network packet (MTU) efficiently

List of things that will make your website much faster:

  • Server must support Keep-Alive. Otherwise change server / host / hosting company / etc. Do it NOW!
  • Reduce HTTP requests (CSS sprites, combine CSS, combine JS, inline CSS, inline JS)
  • Minifiy HTML, JS, CSS. Google Closure Tools, YUI Compressor, Minification
  • Gzip text/html, css, js (IE6 does not un-gzip CSS and JS, if reference is not from HEAD)
  • For IE 5 & 6 use gzip-only-text/html
  • Check if (Content-Encoding: gzip) then (Vary: Accept-Encoding) to allow cache both versions in proxy servers
  • CSS goes in head, JS goes at bottom – right before body closing tag
  • Defer JS if possible. Defer allows to load js after onload
  • Image formats: for photos – always use JPG, for everything else – PNG 8, for animations – GIF
  • Compress images: for JPG use jpegtran or jpegoptim Adobe Photoshop or Advanced JPEG Compressor (both non-free) or free GIMP, for PNG use OptiPNG or PNGOUT. I use non-free but the best one – PNGOUTWin
  • Think connections! Waterfall. webpagetest.org (probably the best site for web page speed / optimization test), Zoompf (a little overkill, but can be useful), Pingdom Tools
  • Try to serve assets in parallel, e.g, images.example.com, images2.example.com; subdomains can be on the same IP
  • Use 2-3 max 4 sub-domains
  • Optimize response headers, smaller, meaningful
  • Avoid redirects (301, 302, META refresh, document.location)
  • Remove ETAG
  • Use Expires + cache-control
  • 25k and greater files are not cached on iPhone
  • Cache dynamic content PHP, ASPX, ruby etc.
  • example.com?param is not cached by most proxies
  • Serve static assets from cookie-less domain, like yimg.yahoo.com
  • After onload via js can pre-cache images (if you know where visitor will go next)
  • Can use double heads (if a lot of meta then put 2nd head at the bottom after closing BODY tag)
  • Use CDN if can afford

And remember about:

Related tools / links:

More reading and watching:

While making website faster, do not forget about security:

Things that big guys (such as Google, Microsoft, Yahoo, Akamai) do. This requires custom software, customized Linux / BSD / Apache compilation, and of course deep knowledge in networking, OSI model, TCP, etc.:

P.S. This blog (wishmesh.com) is not optimized for anything (speed, size, etc.). People are lazy. They optimize only when there is reason to do it, and we like most humans are lazy, so this blog runs on default WordPress hosted on shared server.

CSS pseudo-element first-letter using form label element

Today I spent 1/2 hour trying to understand, why my labels do not respect CSS rule first-letter. Here is an example snippet:
#myform label:first-letter {text-decoration:underline}

<form id="myform" action="/test/" method="post">
<label title="From">From:</label>

The problem was, that The ‘first-letter’ pseudo-element can only be attached to a block-level element.

Reference: w3 – 2.4 The ‘first-letter’ pseudo-element

Also, space is mandatory after ‘first-letter’ in CSS, so that this rule are displayed correctly in older browsers, such as Internet Explorer 6.