Dear Thorsten Rinne / Development Team
Browsers that implement CSS2 and the data URI scheme are able to display a character or image defined in a style sheet before and/or after a tag-delimited text with :before and :after pseudo class selectors.
Thus, the default phpMyFAQ image “used” to expand categories could be defined in the CSS file as (similar code):
Code: Select all
a:after {
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEUAAACwxLQDoyIAAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAjSURBVAjXY6g/wNCgwNCiwNCkwNCowLB/AYhsAosAxesPAACUnAjsLlIPPwAAAABJRU5ErkJggg==);
}
Code: Select all
a:after
{
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEUAAACwxLQDoyIAAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAjSURBVAjXY6g/wNCgwNCiwNCkwNCowLB/AYhsAosAxesPAACUnAjsLlIPPwAAAABJRU5ErkJggg==);
padding-left: 0.5em;
}
This method, reduces the number of HTTP(S) connections needed to retrieve the same image from the server (when present multiple times in the page).
This approach as advantages and disadvantages. Some examples:
- a) not all browsers recognize the data URI scheme;
b) the separation between data and layout presentation could became blurred;
c) if an image is changes, it must be re-encoded and re-embedded in the CSS file;
d) images may be cached - avoiding extra communication with the server -, achieving the same purpose;
- a) CSS files may also be cached, so only a single transaction is needed to obtain and apply the encoded image in different pages;
b) when browsing a HTTPS site, some browsers may complaint about using secure (text, etc) and insecure connections (usually images) from the same page.
..
Kind regards
2012-11-05
pt20100201
..