CODEWITHSUNDEEP
htmlcssvectorbitmap
user3143218
user3143218

Reputation: 1816

How is CSS/HTML Rendered In Browsers?

This is probably a really straightforward question. Unfortunately however, after searching on Google and Wikipedia, I was unable to find any answers. Perhaps I'm wording the question incorrectly.

I'm wondering how the combination between CSS and HTML is rendered on-screen and in-browser? Why doesn't it loose resolution at different pixel densities like a bitmapped or 'raster' based image would?

Furthermore, what part of the process is responsible for how the graphics are rendered? I know the CSS styles the HTML, which is read by a browser, but which is responsible for rendering 'lossless' graphics.

For example: http://jsfiddle.net/C3DW7/4/

div {
    width:200px; 
    height:200px; 
    margin: 0 auto;
    margin-top:50px;
    background: url(http://s21.postimg.org/6vvqhdbyv/square.jpg) no-repeat;
}

If you zoom in on this square using (Ctrl + Shift + Plus) - The edges remain sharp, however the inner purple square, which is a bitmapped image get's blurred - as you would expect.

What is responsible for the HTML element retaining it's sharpness? (even when the dimensions are set in pixels)

Sorry if this seems a little basic, but I can't seem to find any answers.

Upvotes: 2

Views: 92

Answers (1)

Sunny
Sunny

Reputation: 10095

CSS, only as far as your question is concerned, can be thought of simply as a language feature enhancement to HTML. Browsers use the HTML and CSS specified by the web designer, along with defaults as defined in the specs to come up with a notion of what should be seen by the user, when "rendered." Browsers have a rendering engine which take this "picture" they have constructed, as an intermediate step, with your specs and provide the rendered output in the browser. So, the act of retaining sharpness, etc. is based on the implementation of the browser rendering engine and therefore may vary across browsers. There are many well-known rendering engines used by browsers, such as Trident(IE), Gecko(Firefox), Webkit(Safari) and Blink(Chrome). Hope this helps!

Upvotes: 1

Related Questions