[Suggestion] Defining the expanding arrow/character in CSS

You have a suggestion for a future version of phpMyFAQ? Then post it here!

Moderator: Thorsten

Post Reply
pt20100201
Posts: 134
Joined: Mon Feb 01, 2010 2:11 pm
Location: Porto . Portugal
Contact:

[Suggestion] Defining the expanding arrow/character in CSS

Post by pt20100201 »

[Suggestion] Defining the expanding arrow/character in the CSS file

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==); 
} 
or – preferably - in PNG format

Code: Select all

a:after 
{ 
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEUAAACwxLQDoyIAAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAjSURBVAjXY6g/wNCgwNCiwNCkwNCowLB/AYhsAosAxesPAACUnAjsLlIPPwAAAABJRU5ErkJggg==);
padding-left: 0.5em; 
}
The same applies to background images/patterns.

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;
but
  • 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.
The optimal strategy depends on the user needs.
..
Kind regards
2012-11-05
pt20100201
..
Thorsten
Posts: 15560
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: [Suggestion] Defining the expanding arrow/character in C

Post by Thorsten »

Hi,

we use CSS sprites in 2.8, is that okay, too? :-)

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist
pt20100201
Posts: 134
Joined: Mon Feb 01, 2010 2:11 pm
Location: Porto . Portugal
Contact:

Re: [Suggestion] Defining the expanding arrow/character in C

Post by pt20100201 »

Re: [Suggestion] Defining the expanding arrow/character in CSS

Dear Thorsten Rinne
Thorsten wrote:
we use CSS sprites in 2.8, is that okay, too? :-)
…except if they are A4 large "sprites" :-)

Layout customization may be more time consuming.

Kind regards
2012-11-12
pt20100201
Post Reply