SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS font styles

  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS font styles

    Quick CSS Question:

    Normally in my style sheets, my font styles look like this:

    .textstyle {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666666;}
    .textstyle a:link {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666666;}
    .textstyle a:visited {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666666;}
    .textstyle a:hover {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #cccccc;}
    .textstyle a:active {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666666;}

    Is there a way to condense this? Because the link, visited and active states are all essentially the same?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do this:
    Code:
    .textstyle {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666;}
    .textstyle a,
    .textstyle a:link,
    .textstyle a:visited{ color: #666;}
    .textstyle a:hover {color: #ccc;}
    Assuming of course you haven't styled any font-sizes and other rules for the "a" element before otherwise they won't inherit the font-size or font-family from the parent.

    If you hadn't previously defined any of the pseudo states you could have said:

    Code:
    .textstyle {font-family: Arial, Helvetica, Sans Serif; font-size: 12px; color: #666;}
    .textstyle a{color: #666;}
    .textstyle a:hover {color: #ccc;}
    However IE is a little buggy with that and the first example is safer.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I never style :link. Ever. I recall Tommy saying something like, :link needs to be styled if you are using the name attribute for some reason, but since that had been deprecated from anchors in XHTML I never used "name" either.

    please please please don't forget :focus. Add it to your :hover statement. IE<8 won't see it, but, tough.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I never style :link. Ever.
    In IE6 you have to be careful with both :link and :visited due to bugs.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    a:visited{color:red}
    p.test a{color:blue}
    </style>
    
    </head>
    
    <body id="home">
    <p class="test"><a href="#test">Test</a></p>
    <p id="test">&nbsp;</p>
    </body>
    </html>
    Once the link is clicked it will be red in IE6 because the visited state takes over.

    You would need to redefine the visited state again to be sure or add !important to the "p.test a" rule.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    a:visited{color:red}
    p.test a,p.test a:visited{color:blue}
    </style>
    
    </head>
    
    <body id="home">
    <p class="test"><a href="#test">Test</a></p>
    <p id="test">&nbsp;</p>
    </body>
    </html>
    If a:link had been styled originally then the same thing applies. Therefore it's safer to do them in threes as I suggested above because a lot of people are using the old reset that defined :link styles.

    Usually on pages that I style I just use the last method (p.test a,p.test a:visited{color:blue}).

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Once the link is clicked it will be red in IE6 because the visited state takes over.
    Yes I see this regularly since I do use # as placeholders while building... not only would that link be red, but all the (unclicked) links with # as the "url" will also be red... which, really, makes a lot of sense to me : )

    *edit I see it's a skip link, not a #... Firefox has been showing those as visited for me for years. Is it not supposed to do this?
    *edit2 hm, no, you're right, IE6 is ignoring the specificity of p.test a.

    Therefore it's safer to do them in threes as I suggested above because a lot of people are using the old reset that defined :link styles.
    My opinion is starting to shift from "resets cause a lot of unnecessary bother" to "resets are the evil that's killing the interwebs". Mostly because of the outline:none thing though. Outline seriously needs a media campaign or fundraiser or a something-a-thon on public television.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Mostly because of the outline:none thing though. Outline seriously needs a media campaign or fundraiser or a something-a-thon on public television.
    How about a focus group

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    My opinion is starting to shift from "resets cause a lot of unnecessary bother" to "resets are the evil that's killing the interwebs". Mostly because of the outline:none thing though. Outline seriously needs a media campaign or fundraiser or a something-a-thon on public television.
    Amen to that, Outline is being neglected! You should petition the W3C to include something on forced outline usage in WCAG (at least for the next version).

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I thought WCAG already states that feedback is necessary to keyboard users? It doesn't have to be outline, but people who let it get removed by the Meyer reset ignore Meyer's comment stating they should add :focus styles later.

  9. #9
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,362
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    How about a focus group
    here here, +1, good idea, yes yes yes...

    There are an aweful lot of high profile sites that are totally inaccessible via keyboard, maybe we should start a sh*t list ?

  10. #10
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,362
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I thought WCAG already states that feedback is necessary to keyboard users? It doesn't have to be outline, but people who let it get removed by the Meyer reset ignore Meyer's comment stating they should add :focus styles later.
    E Meyer does state that people should define :focus, but I think he made a big mistake by including an outline: declaration in his CSS reset. In reality a "reset" shouldn't interfere with browser accessibility features.

    I've noticed two main reasons why "designers" remove outline (or don't give an alternative:

    1. They use a CSS reset without reading the instructions/advisories
    2. They do it for visual/vanity purposes - really, as web designers they should know better

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bluedreamer View Post

    1. They do it for visual/vanity purposes - really, as web designers they should know better
    Yes, the problem is that the dotted outline border is often unsightly on tab menus or on items where text-indent has been used to hide text and the border goes all around the off screen text as well. There are better image replacement techniques though that can avoid this issue.

    Designers could just offer more sightly visual clues anyway quite easily.

    I suppose what was really needed was that tab should have its own pseudo class because the element should actually be made more prominent when tabbing because it's hard to spot sometimes. Mouse users don't really need that clue.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Actually, I think outline in general is rarely considered. I know designers who are quite accessibility concious that weren't even aware that outline existed. It seems to be one of those CSS components that has fallen behind on the best practice marketing talk - especially in the sense of how it can be used to boost usability.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    E Meyer does state that people should define :focus, but I think he made a big mistake by including an outline: declaration in his CSS reset.
    YES especially because of IE. IE6 and 7 will show outlines on their own, but not :focus styles. Once you remove it, you can't add anything back without using some goofy JS to make IE :focus.

    It would help if every code example for something, whenever it has :hover, has :focus just in the same line by default. Lots of web developers out there have also never heard of :focus, if what we hear in the forums is to be believed... and one reason would be that many code examples (for other things) don't have :focus listed anywhere.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes I think we can lay the blame safely at the door of IE once again because it never implemented :focus or outline in IE7 and under so no one bothered to think about them. Old IE uses a:active incorrectly as though in some respects it were :focus and just totally confused everyone for years.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Though my IE7 will use outline in a default sort of way: if nothing is mentioned about outline, I do get outlines in my links. It's made me think twice about removing outline in main menus (the one place I tend to remove them, as it's a pretty-boy menu and has :focus styles in it) since it's better than nothing in IE.
    Recently I removed it using :nth-of-type just so only browsers understanding :focus styles would remove the outline and use the :focus styles. It kept outline in IE6 and 7.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •