CSS 3 Web Fonts

June 21st, 2009

Among other cool things, CSS 3.0 finally introduces an old feature that had only been implemented so far using proprietary extensions, and therefore did not receive the attention it deserved: Web Fonts !

As specified in the CSS Fonts Module Level 3 specifications, web developers can insert @font-face CSS rules into their stylesheets to specify explicitly the location of the font resource corresponding to a font face specified in that stylesheet, thus allowing a consistent rendering of their site.

For instance, I use the “Soviet” font family for the title of this blog, but this font is not so common, so I inserted the following code in the site main stylesheet:

@font-face {
  font-family: "Soviet";
  src: url("./fonts/Soviet2.ttf") format("truetype");
}

And in the CSS rule corresponding to the site title:

#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: 56px 'Soviet', 'Trebuchet MS', Sans-serif;
	letter-spacing: -3px;
	text-decoration: none;
	color: #000;
	top: 58px; left: 300px;
}

This causes compatible web browsers to download the Soviet Font from my site and correctly display the site title.

Of course, not many web browsers today support Web Fonts (according to my tests, only WebKit nightlies have the correct display), but things will change shortly, as Firefox 3.5 should support them.

HTML 5 offline web applications

April 4th, 2009

HTML 5 provides a new caching feature to support offline web applications.

Basically, you can specify in a specific file called the “cache manifest” the caching policy to apply to a particular web page.

To activate the HTML 5 caching feature for a specific document, you only need to specify the URI of the cache manifest file in the cache-manifest attribute of the <html> element.

<!DOCTYPE HTML>
<html cache-manifest="myapp.cache">
...

The file that references the cache manifest file is called the master entry.

Please note that to be properly parsed by the browser, the manifest file must have a text/cache-manifest MIME type (which means that you will need either to add a custom file type extension binding to your web server or to specify manually the mime-type, for instance using PHP header directive).

A cache manifest file typically looks like this:

CACHE MANIFEST
index.html
style.css
images/logo.png

NETWORK:
search.php

This file specifies several files to cache (the cache explicit entries), and then specifies that search.php should never be cached (it is said to belong to the online white list), so that any attempt to access that file will bypass the cache.

Whenever the user browses to the page corresponding to a document to which a cache manifest is associated, the browser must check on the server if the latter has been modified:

  • If it hasn’t, then the cached content is used,
  • If a new version of the cache manifest exists, then the cached content is considered as staled and reloaded from the server.

The cache manifest for a document may also contain fallback entries that can be used if the browser can’t retrieve the original content. Below is an example where a static image is used when the retrieval of a dynamically generated image fails:

CACHE MANIFEST
FALLBACK:
images/mirror-effect.php server-busy.jpg

HTML 5 also defines an application cache API to manually trigger cache updates:

  • update(): updates the cache for the current document in the background,
  • swapCache(): reflow the HTML document using updated cached content,
  • onupdateready(): event triggered when the cache content has been updated,
  • onobsolete(): event triggered when the cache content has been marked as obsolete,

HTML 5 <audio> & <video> elements

April 3rd, 2009

One of the most revolutionary concept introduced by HTML 5 is the native support of audio and video playback in web pages.

Two new HTML elements have been defined for that purpose: <audio> and <video>, based on the generic media element type.

Media elements use a common set of attributes:

  • src: defines the source of the media to render,
  • autoplay: boolean to activate|prevent immediate playback,
  • loop: boolean to activate|prevent automatic looping on content,
  • controls: boolean to display|hide browser playback user interface.

<video> and <audio> elements can contain elements to be displayed to the user in older browsers that do not support these new elements.

Below is an example of how to use the <audio> element:

<audio src="audio.ogv" controls width="100" height="50">
    <a href="audio.ogv">Listen</a>
</audio>

Alternatively to the src attribute, the content to be rendered can be specified using one or more <source> elements, each of them describing a specific media resource.

Each <source> can be identified by its src and type attributes, optionally complemented by a codecs attribute:

<audio controls width="100" height="50">
     <source src="audio.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio.spx" type="audio/ogg; codecs=speex">
    <source src="audio.oga" type="audio/ogg; codecs=flac">
</audio>

The <video> element has an optional poster attribute that can be used to define an image to be displayed before the video is played:

<video src="oggy.ogv" poster="oggy.jpg" />

These new media elements also support a set of handy javascript method, properties and events, to allow the fine-grained control of the rendered UI.

<script>
function playVideo(url){
     var video = document.getElementById("video");
     video.setAttribute("src",url);
}
</script>
<video id="videoPlayer" controls=false/>
<p>
     <button type="button"
             onclick="video.playbackRate = -2;">
         Rew
     </button>
     <button type="button"
             onclick="video.play();">
         Play
     </button>
     <button type="button"
             onclick="video.pause();">
         Pause
     </button>
     <button type="button"
                 onclick="video.playbackRate = 2;">
         FF
     </button>
</p>

Browser HTTP 1.1 caching compliancy test

March 22nd, 2009

Following a previous post about HTTP 1.1 caching mechanisms, I have been asked whether common browsers were actually compliant or not, so I wrote a little test to verify if at least basic features were supported.

The results for your browser will appear in the frame below.

Update: This is a new version with cache headers completely handled by PHP instead of using apache mod_expires. I had to do this because I could’nt deactivate chunk transfer encoding of pages generated by php on my host, and this prevents HTTP 1.1 caching headers to be inserted by apache … the test seems to work now, but it is still in beta

New HTML 5 block-level elements

March 9th, 2009

The HTML 5 specification introduces new block elements that can be used to structure documents:

  • <section>: represents a document or application section (a content column for instance),
  • <article>: represents an independent piece of content inside a document/section (a blog entry for instance),
  • <aside>: represents a piece of content not directly related to the displayed content (typically a sidebar),
  • <header>: represents a document header,
  • <footer>: represents a document footer,
  • <nav>: represents a block of navigation links (typically a blog navigation bar),
  • <dialog>: can be used to render a chat session, using complementary <dt> (talker) and <dd> (quote) tags,
  • <figure>: can be used to provide textual information about an embedded content,
  • <address>: represents a document/section contact block,

Introducing: HTML 5

March 6th, 2009

The HTML version you are using everyday is HTML 4.0.1, defined back in 1999 by the W3C.

Its XML counterpart is XHTML 1.1, successor of XHTML 1.0 defined in 2000 and revised in 2002 by the W3C.

The newest XHTML 2.0 was at first meant to replace both, but the fact that it was not compatible with XHTML 1.1 raised quite a controversy.

This, added to the fact that some major internet companies and non-profit organizations wanted to expand the typical browser experience to include other internet usages like messaging and media playback led to the creation of the Web Hypertext Application Technology Working Group (WHATWG), that released in 2005 the first version of the HTML 5 specification.

The W3C started in 2007 a new HTML working group that took the WHATWG HTML 5 specification as a basis, leading to the publication of the first HTML 5 draft in 2008.

The W3C HTML 5 working group is led by Ian Hickson from Google, Inc (WHATWG HTML 5 specification editor, CSS 2.1 co-editor, Acid2 and Acid3 developer) and David Hyatt from Apple, Inc (Safari/Webkit project leader, Firefox co-founder).

The HTML 5 specification defines both HTML and XHTML document types.

The W3C maintains a list of differences between HTML 5 and HTML 4.

I will try to explain these differences in separate posts:

Differences between strict & transitional (X)HTML

March 6th, 2009

HTML and XHTML exist today in two flavors: strict and transitional. By default, a lot of editing tools or CMS use the transitional model.

This is a shame because it may lead people to use a deprecated HTML syntax for presenting content instead of using CSS. This will lead to future incompatibilities and extensive use of the “Quirks mode”.

I will summarize below the main differences between the strict and transitional models. Then, the reader may be able to figure out whether he can safely switch to (X)HTML strict or not.

Elements only allowed in transitional (X)HTML

The list below has been compiled using this full XHTML doctypes element comparison

  • applet,
  • basefont,
  • center,
  • dir,
  • font,
  • frame,
  • frameset,
  • iframe,
  • isindex,
  • menu,
  • noframes,
  • s,
  • strike,
  • u,

Today, only the iframe element is still used widespread, despite the fact that it can be replaced by object.

Attributes only allowed in transitional (X)HTML

The list below has been compiled using this full XHTML doctypes element attributes comparison

  • align in anything but tables-related elements,
  • alink,
  • background,
  • bgcolor,
  • border,
  • color,
  • compact,
  • dir,
  • face,
  • frameborder,
  • height,
  • hspace,
  • ismap,
  • height,
  • lang,
  • link,
  • noshade,
  • nowrap,
  • object,
  • size,
  • start,
  • target on anchors a,
  • text,
  • type,
  • version,
  • vlink,
  • vspace,
  • width.

As you can see, most of these attributes can easily be replaced by CSS rules. The only one that is still used widespread is a.target. In my humble opinion, this is not a problem, because you should not decide to open a link in a new window on behalf of the user. Anyway, if you really want to do that, you can still use javascript.

Document structure constraints in strict (X)HTML

The body, blockquote and form must only contain block-lebel elements like div or span.

Choosing the proper DOCTYPE

March 6th, 2009

I have been recently asked to tell the differences between HTML 4.0, XHTML 1.0 and HTML 5.0, and I had to dig in the specifications to provide an answer. Doing this, I realized that I did not really pay attention to the DOCTYPE declarations in my web pages so far, possibly leading to unexpected behaviours in some browsers (see the very detailed article on Wikipedia about Quirks mode.

To be short, HTML documents must start with a DOCTYPE declaration that is used by the browser to choose the appropriate rendering. It allows in particular to distinguish between real HTML documents and XHTML documents served as text/html to non-XHTML browsers (though required by the XHTML specification, the DOCTYPE declaration is actually redundant with the namepace declaration if the document is served as application/xhtml+xml).

The current HTML specification is HTML 4.01 (1999). It defines three document types:

  • HTML 4.01 strict, that relies entirely on CSS for presentation
  • HTML 4.01 transitional, that still allows deprecated presentational markup
  • HTML 4.01 frameset, that must only be used to declare framesets

In a first attempt to replace HTML 4.01, the W3C has defined XHTML 1.0 (2000-2002), that redefines HTML 4.01 using a strict XML syntax. Unsurprisingly, XHTML 1.0 also defines three document types:

  • XHTML 1.0 strict, that is exactly HTML 4.01 strict with closing tags,
  • XHTML 1.0 transitional, that is exactly HTML 4.01 transitional with closing tags,
  • XHTML 1.0 frameset, that must only be used to declare framesets.

In a later standardization effort, the W3C produced XHTML 1.1 (WIP), that doesn’t add much, but defines only a strict DOCTYPE.

To summarize, when developing a new page, the first thing you need to decide is if you go for HTML or XHTML. My recommendation is to always choose HTML unless you really need XHTML (for instance because you want to add inline SVG).

Then, in both cases, unless you really need to use the deprecated HTML syntax, then use the strict DOCTYPE.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Please note that according to the W3C XHTML guidelines, the XML declaration (<?xml version="1.0" encoding="UTF-8"?>) should be omitted, as it triggers quirks mode in older versions of Internet Explorer. This is only a problem if you need to specify a different character encoding than UTF-8 (the default).

Inline SVG Fallback

March 2nd, 2009

As you may already know, IE doesn’t support SVG unless you install a plugin like the ASV, that is unfortunately not supported anymore by Adobe.

As a web developer willing to use inline SVG, your best bet is thus to provide fallback mechanisms to display IE visitors at least a degraded version of what you’re trying to express/demonstrate, and teach them what they’re missing by sticking with evil IE.

Luckily, IE will simply ignore any markup it does’nt know, so you usually don’t need to bother masking or removing the SVG markup when serving pages to your IE visitors.

This is however not true if you insert plain text if your SVG … Let’s take an example.

When you insert the following SVG in your page:

<svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" wiewBox="0 0 200 100">
   <text x="0" y="0"
         font-family="Verdana"
	 font-size="55" fill="blue" >
        Hello, out there
   </text>
</svg>

IE will ignore all SVG markup and formatting, and actually display the plain text with the current style:

Hello, out there

Now, what happens when you insert HTML markup inside your SVG using the foreignObject tag ?

<svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" wiewBox="0 0 200 100">
   <foreignObject width="200" height="100">
      <span style="color:blue;">
        Hello, out there
      </span>
   </foreignObject>
</svg>

Well, IE ignores all SVG and displays only the HTML markup embedded in the foreignObject tag:

Hello, out there

Based on this behavior, the guys at Sheperd interactive have imagined a very elegant inline SVG fallback mechanism that uses SVG conditional processing.

In a nutshell, the actual SVG and the IE fallback are embedded in an SVG switch:

  • SVG aware browsers will recognize the conditional directive, and render the first alternative they understand (the actual SVG), ignoring the other (the IE fallback)
  • IE will silently ignore all SVG markup (including the conditional directive), and go straight to the fallback written in HTML.

In the example, below, SVG-aware browsers will display a red circle, and IE a simple text.

<svg xmlns="http://www.w3.org/2000/svg"
        version="1.1" wiewBox="0 0 200 100">
  <switch>
     <circle cx="150px" cy="100px" r="50px"
               fill="#ff0000" stroke="#000000"
               stroke-width="5px"/>
     <foreignObject width="200" height="100">
        <span style="color:red;">
          This is not a red circle
        </span>
     </foreignObject>
   </switch>
</svg>

See the actual rendering below:

This is not a red circle

Sample Apache cache configuration

February 26th, 2009

The Apache 2 web server can be configured to define a custom cache policy, allowing a fine-grained control over your web site content lifecycle in browser caches. This article provides a step-by-step simple configuration sample. The reader is invited to read first this other article presenting the HTTP 1.1 cache mechanisms.

Step 1: Activate expiration module

By default, Apache 2 doesn’t insert any expiration header in served documents. This feature is provided by a specific module, mod_expires.

Two operations are required to activate the feature:
•    add mod_expires to the list of enabled modules,

a2enmod expires

•    add the ExpiresActive On directive to the site configuration.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
   </Directory>
...
</VirtualHost>

Step 2: Define a default expiration policy

A default expiration policy that applies to all documents can be specified using the ExpiresDefault directive.

I would recommend to define the default expiration period to a very short value, in order to avoid client browsers keeping forever in cache documents for which you forgot to provide an explicit expiration period (see next paragraphs).

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"
   </Directory>
...
</VirtualHost>

Step 3: Define an expiration date per document type

A specific expiration policy can be defined for each document type using the ExpiresByType directive.

It is for instance possible to define an explicit expiration policy for HTML pages, javascript, images and json text files in order to control their lifetime in the browser cache, and avoid unnecessary validity checks from the client.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"

      ExpiresByType text/html "access plus 1 day"
      ExpiresByType text/javascript "access plus 1 day"
      ExpiresByType text/x-json "access plus 1 day"

      ExpiresByType image/gif "access plus 1 month"
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpg "access plus 1 month"

   </Directory>
...
</VirtualHost>

Note: The apache 2 web server uses the MIME-type to categorize documents. In order to have the proper directive applied to them, JSON text files must be sent as text/x-json documents.

Step 4: Mark session-specific documents as non-cacheable

Even if a large part of a specific site might be cacheable without disturbing the service, some specific documents are purely dynamic (like the results of a search query for instance) and must not be cached.

Fortunately enough, it is allowed to define exceptions to the general expiration policy defined for a given file type, using file pattern matching with the FilesMatch directive.

Thus, it is possible to specify that a Cache-Control header corresponding to “no-cache” be inserted for all files matching a given criteria, that can be based on a regular expression.

The Header directive is used to insert specific Cache-control values. It is provided by the mod_header module, which is activated by default.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"
      ExpiresByType text/html "access plus 1 day"
      ExpiresByType text/javascript "access plus 1 day"
      ExpiresByType text/x-json "access plus 1 day"

      ExpiresByType image/gif "access plus 1 month"
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpg "access plus 1 month"


      <FilesMatch "searchResults.html">
            Header set Cache-control "no-cache"
      </FilesMatch>

   </Directory>
...
</VirtualHost>

download free edition adobe photoshopfree download hustler magazine in adobe format Kopen oem software download adobe after effectsadobe svg veiwer downloaddownload adobe acrobat for freeppd download adobe Windows 7 adobe flash player active x downloadadobe reader kostenloser download download Adobe software