WebFragments

WebFragments

Introduction

In this article I will explain to you how to build a self consistant html code fragment (which I named it webFragment), and how to build it from an existing website.

Definition

A Webfragment (webF) is a stand-alone html node, i.e. it can be inserted anywhere in the html tree and it can maintain it’s own formatting properties.

Generally speaking the code will be as follow:

 <style>
            css rules
        </style>
        <webF>
            html code
        </webF>

How to built a WebF

A webF must be isolated. That is its rules shouldn’t affect nodes outside the webF itself and the webF shouldn’t be affected by other rules.
The isolation is obtained by using selectors. A selector is the part of a css rule that say which nodes the rule apply to (go here to learn more). Since selectors are applied in cascade, the first rule of a webF is satisfied writing selectors in the following way
        .webFUID .cls {}
Where .webFUID is a unique ID for every webF. So the rules will be made-up as follow:
 
 <style>
            .webFUID { }
            .webFUID A { }
        </style>
        <webF class="webFUID">
            html code
        </webF>
Since all rules, has an ancestor class selector, they will never be applied outside the webF.

The second rule in the webF definition is a little more difficult to satisfy. Css use specificity (here for more) to choose the priority in applying a property and specificity say that id selectors has priority over class selectors, so selector “#id A” will overwrite selector “.webF A”

 
 #id A { p1 }
        .webFUID A { p1 }
So it can be used the following approach
 <style>
            #webFUID.webFUID { }
            #webFUID.webFUID A { }
        </style>
        <webF id="webFUID" class="webFUID">
            html code
        </webF>
The id selector will increase specificity of the rule, but it will require to usage of the id attribute for styling (if a webF is used twice in a page, the node cant be accessed uniquely by id).

I will call softly isolated webF the une using class selector, and hard selector the one using id selectors.

To clone a webF from the web

The most interesting thing of webF is that they can be extracted very easily from an existing web page. For exemple go to the website www.bbc.co.uk and try to extract the following html fragment
To create the corresponding webF you need to identify the starting node to be copied. To do that you can use FireBug, the Firefox extension for developers.
 <div id="mostPopular" class="module">
            <h2 id="mostPopular_title" class="draggable"> Most Popular in News </h2>
            <div id="mostPopular_container" class="container">
                <script type="text/javascript"/>
            </div>
        </div>
Than you have to take all the properties that are not disabled and put them in a single rule
        
 .webFUid {
            background-color: #DCDCDC;
            padding: 0 5px 5px;
            width: 326px;
            float: left;
            margin-bottom: 16px;
            font-family: Arial,sans-serif;
            letter-spacing: 0;
        // inherited
            font-size: 1.3em;
            line-height: 1.6em;
            color: #000000;
        }
It’s necessary not to forget the inherited property of the starting node.
Than you must go on with the second node
 
 .webFUid .css_0 {
            border: medium none;
            padding-left: 2px;
            font-size: 2.154em;
            font-weight: bold;
            letter-spacing: -0.2px;
            line-height: 1.4285em;
            border-bottom: 1px solid #D3D3D3;
            margin-bottom: 7px;
            color: #323232;
            margin: 0;
            padding: 0;
            font-family: Arial,sans-serif;
        }
And create a rule for any node. If pseudo-rules (like A:hover) exist you need to create a rule also for those one (like .webFUid .css_x:hover).
 .webFUid .css_10 {
            display: inline-block;
            padding-right: 0;
            color: #323232;
        }

        .webFUid .css_10:hover {
            color: #1A4D82 !important;
            text-decoration: none;
        }
Remember to respect specificity for pseudo classes. If a node has pseudo class rules, it will be coded as follow
 
 .webfUID .css_x { node properties }
        .webfUID .css_x:pseudo { node properties }
Using this approch, pseudo rules always has greater specificity over normal node properties. Sometime this is not correct, so it should be use the following form
 
 .webfUID.parentId A.css_x { node properties with higher specificity }
        .webfUID .css_x:pseudo { node properties }
        .webfUID .css_x { node properties }
At least remember to convert properties containing url (making it local, absolute or Base64 encoded). For exemple
 
 .livestats-icon {
            background: url("../contentblock/../../img/livestats-sprite.png") repeat scroll 0 0 #A9A9A9;
        }

Becomes

 
 .webFUid .css_10 {
            background: url"/css/img/livestats-sprite.png") repeat scroll 0 0 #A9A9A9;
        }
After creating all the rules you can go on optimizing them. Get all the rules that have common properties, extract them and create a new rule having all the common properties. The new rule will have as selector the list of common rules selector, for exemple
 
 A { p1; p2; p3; }
        B { p1; p3; p4 }

Become

 
 A { p2 }
        B { p4 }
        A, B { p1; p3; }
Finally generate the html code applying to each node the class selectors previously created.
 
 <div class="webFUid">
        <h2 class="css_0">

        </h2>
        </div>
If you will have the patient to arrive at the bottom you’ll get something like:
Clearly this is a very long work, and after doing it several times I asked to myself: what are the computers for? Why can’t I create a program who will do all the dirty work? Below are several examples of webF I extracted automatically from the BBC web site. Try to insert them in one of your webpage and let me know.

Examples

More examples of webF extracted from bbc, follow

Menu | Top News Story | News | Spotlight | MostPopular | Business | World Service | Weather | Drawers | Languages | Explore | Footer