how browser render a page with html/css/js

Basic steps:

1. DNS get the IP. Then send http/s request to the server to fetch the page content.

2. On getting the content, download the resources(css/js/images) and try to render it. Note: the render process would not begin before css is all downloaded since it does not make sense to render something without konwing its styling.

3. Build the DOM for the given HTML and the CSS-DOM for the style sheets. Then put these two together and build the Render-tree which will be used to paint the real viewable page.

4. Once we have the render tree, browser starts to do LAYOUT which will calculate the dimension of the elements(width/height) as well as the position. The viewport(root element ‘HTML’) will be place in the (0,0) position. 0,0 here is the innerHeight/innerWidth.

5. After the Layout is done, browser start to PAINT the render tree and output all the elements to the viewport.

Anytime css/DOM changes, the re-Paint or re-Layout will be triggered so that user get the latest view. See the below Article for detail.

My another post explains the sequence of the execution when page load

This is a nice article explaining the basics about the rendering process:

This is the most detail article on how browser work. 中文翻译: 现代浏览器的工作原理

This video also explained the basic in 4 minutes.

This is a better video explaining how browser render a page

Below is the BEST video so far explaining this topic by CTO of Akamai:

print the page without link

While print, we do not want those long links which makes the page not readable.

add some style to the @media print should be able to achieve this.

Some server (rails/java) is required to use a parent selector. The body element is perfect for selecting what should be the entire page.

      @media print {
         body a:link:after, a:visited:after {
            content: "";

disable obfuscation in gwt css resources

Option 1 setting in gwt.xml

use the

<set-configuration-property name="" value="pretty"/>

the code that generates the aforementioned  very  long class names is present in the
computeObfuscatedNames  method of  class:

 if (prettyOutput) {
          obfuscatedClassName += "-"
              + type.getQualifiedSourceName().replaceAll("[.$]", "-") + "-"
              + name;

Retaining the original class names is a very useful tool while development. (obfuscation is ideal for only production)
Unfortunately, you can not override the above method which means we are stuck with these long names. I wish there was a way to have GWT just retain the class names as they are.

Option 2 use @external

con: using @external for each and every class is cumbersome and cant be used for styles within widgets
pro: we can keep the original name.

By checking out the source-code, and cross comparing with the GWT wiki, I found:

/* @external also accepts tail-globs */
@external .myProject-*;
.myProject-text {}
.myProject-foo {}

So, if you want to let all the classes in a CSS resources in a file be external, use:

@external *;

Another flavor is

@external .legacySelectorA, .legacySelectorB;
.legacySelectorA { .... }
.legacySelectorB { .... }

Learning To Use The :before And :after Pseudo-Elements In CSS

Reference for Pseudo class  and  Pseudo element

What Does A Pseudo-Element Do?

A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.

The word “pseudo” is a transliteration of a Greek word that basically means “lying, deceitful, false.” So, calling them pseudo-elements is appropriate, because they don’t actually change anything in the document. Rather, they insert ghost-like elements that are visible to the user and that are style-able in the CSS.

Basic Syntax

The :before and :after pseudo-elements are very easy to code (as are most CSS properties that don’t require a ton of vendor prefixes). Here is a simple example:

#example:before {
   content: "#";

#example:after {
   content: ".";

There are two things to note about this example. First, we’re targeting the same element using #example:before and #example:after. Strictly speaking, they are the pseudo-elements in the code.

Secondly, without the content property, which is part of the generated content module in the specification, pseudo-elements are useless. So, while the pseudo-element selector itself is needed to target the element, you won’t be able to insert anything without adding the content property.

In this example, the element with the id example will have a hash symbol placed “before” its content, and a period (or full stop) placed “after” its content.


You could leave the content property empty and just treat the pseudo-element like a content-less box, like this:

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;

However, you can’t remove the content property altogether. If you did, the pseudo-element wouldn’t work. At the very least, the content property needs empty quotes as its value.

You may have noticed that you can also code pseudo-elements using the double-colon syntax (::before and ::after), which I’ve discussed before. The short explanation is that there is no difference between the two syntaxes; it’s just a way to differentiate pseudo-elements (double colon) from pseudo-classes (single colon) in CSS3.

One final point regarding the syntax. Technically, you could implement a pseudo-element universally, without targeting any element, like this:

:before {
   content: "#";

While the above is valid, it’s pretty useless. The code will insert a hash symbol before the content in each element in the DOM. Even if you removed the <body> tag and all of its content, you’d still see two hash symbols on the page: one in the <html> element, and one in the <body> tag, which the browser automatically constructs.

Characteristics Of Inserted Content

As mentioned, the content that is inserted is not visible in the page’s source. It’s visible only in the CSS.

Also, the inserted element is by default an inline element (or, in HTML5 terms, in the category of text-level semantics). So, to give the inserted element a height, padding, margins and so forth, you’ll usually have to define it explicitly as a block-level element.

This leads well into a brief description of how to style pseudo-elements. Look at this graphic from my text editor:


In this example, I’ve highlighted the styles that will be applied to the elements inserted before and after the targeted element’s content. Pseudo-elements are somewhat unique in this way, because you insert the content and the styles in the same declaration block.

Also note that typical CSS inheritance rules apply to the inserted elements. If you had, for example, a font stack of Helvetica, Arial, sans-serif applied to the <body> element of the document, then the pseudo-element would inherit that font stack the same as any other element would.

Likewise, pseudo-elements don’t inherit styles that aren’t naturally inherited from parent elements (such as padding and margins).

Before Or After What?

Your hunch on seeing the :before and :after pseudo-elements might be that the inserted content will be injected before and after the targeted element. But, as alluded to above, that’s not the case.

The content that’s injected will be child content in relation to the targeted element, but it will be placed “before” or “after” any other content in that element.

To demonstrate this, look at the following code. First, the HTML:

<p class="box">Other content.</p>

And here’s the CSS that inserts a pseudo-element: {
   width: 300px;
   border: solid 1px white;
   padding: 20px;
} {
   content: "#";
   border: solid 1px white;
   padding: 2px;
   margin: 0 10px 0 0;

In the HTML, all you would see is a paragraph with a class of box, with the words “Other content” inside it (the same as what you would see if you viewed the source on the live page). In the CSS, the paragraph is given a set width, along with some padding and a visible border.

Then we have the pseudo-element. In this case, it’s a hash symbol inserted “before” the paragraph’s content. The subsequent CSS gives it a border, along with some padding and margins.

Here’s the result viewed in the browser:


The outer box is the paragraph. The border around the hash symbol denotes the boundary of the pseudo-element. So, instead of being inserted “before” the paragraph, the pseudo-element is placed before the “Other content” in the paragraph.

Inserting Non-Text Content

I mentioned briefly that you can leave the content property’s value as an empty string or insert text content. You basically have two additional options of what to include as the value of the content property.

First, you can include a URL that points to an image, just as you would do when including a background image in the CSS:

p:before {
   content: url(image.jpg);

Notice that the quotes are missing. If you wrapped the URL reference in quotes, then it would become a literal string and insert the text “url(image.jpg)” as the content, instead of inserting the image itself.

Naturally, you could include a Data URI in place of the image reference, just as you can with a CSS background.

You also have the option to include a function in the form of attr(X). This function,according to the spec, “returns as a string the value of attribute X for the subject of the selector.”

Here’s an example:

a:after {
   content: attr(href);

What does the attr() function do? It takes the value of the specified attribute and places it as text content to be inserted as a pseudo-element.

The code above would cause the href value of every <a> element on the page to be placed immediately after each respective <a> element. This could be used in a print style sheet to include full URLs next to all links when a document is printed.

You could also use this function to grab the value of an element’s title attribute, or evenmicrodata values. Of course, not all of these examples would be practical in and of themselves; but depending on the situation, a specific attribute value could be practical as a pseudo-element.

While being able to grab the title or alt text of an image and display it on the page as a pseudo-element would be practical, this isn’t possible. Remember that the pseudo-element must be a child of the element to which it is being applied. Images, which are void (or empty) elements, don’t have child elements, so it wouldn’t work in this case. The same would apply to other void elements, such as <input>.


multi level css class selection

div.high>div.middle>div.low {
    border: 1px solid #a8a8a8;      

That means “a div with a class of low, which is a child of a div with a class of middle, which is a child of a div with a class of high”.

<div class=”high”>

<div class=”middle”>

<div class=”low”>




CSS Attribute Selectors

Attribute Selectors

An attribute selector allows you to style an element based on the existence, value or partial value of a specific attribute.

Operator: none

Description: Using an attribute selector with no operator will select all the elements that contain that attribute. (CSS 2.1)

This example would look for all a tags that have the “rel” attribute defined, no matter what the value assigned to that attribute.

a[rel] { 
  color: red; 
  text-decoration: none; 


Operator: =

Description: Using the equals sign as an operator will allow the selector to match an element with the given value of an attribute.

In this case, all table cells with a width of 50 will have a grey background. (CSS 2.1)

 td[width="50"] { 
  background: #ccc; 


Operator: ~=

Description: If the equal sign is preceded by a tilde (~) then the selector will match if the value listed is any one of the space-separated values of the given attribute. Rmember that it is possible to have more than one value in a single class attribute. Like this:

<p class = "warning foo">

You could then have a “.warning” and “.foo” class that would be applied to this.

The following selector would apply if the class contained the word “warning”

 p[class~="warning"] { 
  color: red;  


Operator: |=

Description: If the equal sign is preceded by a pipe (|) then the selector will match elements whose attribute values form a hyphenated list of words in which the specified value is present. This operator is primarily intended for the lang attribute.

a[lang|="en"] { 
	text-decoration: none;
	background: #FF0000;
	color: #FFFFFF;
	border-bottom: 1px solid #0000FF;


Operator: ^=

Description: If the equal sign is preceded by a caret (^) then the selector will match all elements that have an attribute that begins with the specified value.

The following CSS will grab any link that has an href attribute value that starts with http, and place an icon after it.

 a[href^="http"] { 
  padding: 0 20px 0 0; 
  background: #fff url(icon_external-site.png) no-repeat right center; 


Operator: $=

Description: If the equal sign is preceded by a dollar sign ($) then the selector will match the last characters of an attribute (such as a file extension).

The following CSS will grab any link that has an href attribute value that ends with “.pdf” and throw a grey background behind it and no underlining..

 a[href$=".pdf"] { 
  	background: #ccc;
	text-decoration: none;


Operator: *=

Description: If the equal sign is preceded by an asterisk (*) then the selector will match any element that has an attribute that contains the value at any point.

The following CSS will apply the rule to any link with a title attribute that contains the pattern “home”. (CSS3)

 a[title*="Home"] { 
  background: #ccc;
	text-decoration: none; 





white space missing in css GWT 2.4

GWT 2.4 will eat white space inside css prpperties.

For exapmle


background: -moz-linear-gradient(top, #6d6d6d 0%, #494949 100%); /*FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6d6d6d), color-stop(100%, #494949)); /*Chrome,Safari4+*/
 background: -webkit-linear-gradient(top, #6d6d6d 0%, #494949 100%); /*Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #6d6d6d 0%, #494949 100%); /*Opera 11.10+ */
 background: -ms-linear-gradient(top, #6d6d6d 0%, #494949 100%);  /*IE10+ */
 background: linear-gradient(top, #6d6d6d 0%, #494949 100%);  /*W3C */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#6d6d6d', endColorstr = '#494949', GradientType = 0); /* IE6-9 */
 text-shadow: #333 0px -1px;


It will eat the spance between #6d6d6d and 0%, also that between #494949 and 100%. This would cause the property invalid.

What’s more, due to the invalidation of the background property, the text-shadow would not appear in the client side css because it is below the background.

Really mess… waste me a lot of time figuring this out.


The GWT 2.5 fixed the issue.