How Browsers Work ?

The browser's main components are :

1. The user interface - this includes the address bar, back/forward button, bookmarking menu etc. Every part of
the browser display except the main window where you see the requested page.
2. The browser engine - the interface for querying and manipulating the rendering engine.
3. The rendering engine - responsible for displaying the requested content. For example if the requested content
is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
4. Networking - used for network calls, like HTTP requests. It has platform independent interface and underneath
implementations for each platform.
5. UI backend - used for drawing basic widgets like combo boxes and windows. It exposes a generic interface
that is not platform specific. Underneath it uses the operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute the JavaScript code.
7. Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for
examples, cookies. The new HTML specification (HTML5) defines 'web database' which is a complete
(although light) database in the browser.

Conceprual diagram of a main browser components:

Modernizr: The Awesome Detection Tool

There are a large number of different browsers around now unlike before back in the day when internet explorer was the monopoly of the web.


Web applications are getting more and more complicated as the web/internet evolves rapidly, which inevitably causes inconsistencies in web standards, and headaches for people who are in the industry of web design/development!

Modernizr is a tool which helps web designers and developers detect features and conditionally styles functionality catered for things that are enabled/disabled or incompatible due to end users' browser/software/hardware.

Download Modernizr.js 

How to style chrome developer tools with CSS ?

I am a user and a big fun of chrome developer tools.  I use it daily as a part of my web-development.
Here is a tip how to customize your own dev. tools with custom css properties:

-  on Ubuntu/Linux find a Chrome config file - /home/user/.config/chromium/profile 1/User StyleSheets   and open that file with your text editor.
- it is empty by default, but you can  copy/paste a color theme from a template. Here is a good link http://darcyclarke.me/design/skin-your-chrome-inspector/

If you want to play with your own styles enter the following URL in a Chrome adress bar: chrome-devtools://devtools/devTools.css. Copy the content in a config file and you can now experiment.

Happy coding