SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru bronze trophy TomB's Avatar
    Join Date
    Oct 2005
    Location
    Milton Keynes, UK
    Posts
    996
    Mentioned
    9 Post(s)
    Tagged
    2 Thread(s)

    :after {content: ""} bad practice?

    I've used this in the past to put asterisks on required form element labels. In this place, it makes perfect sense, the asterisk isn't content, it's there as a visual clue.

    However, in other uses, is it bad practice? I have a series of pages with thumbnail images. The client wanted to add a hint: "Click on thumbnails for larger images".

    I can either edit the HTML for a few pages to include an extra element or I can do it with one file change:

    Code:
    .thumbs:after {content:'Click on thumbnails for larger images';}

    My question is, is doing this a bad idea? I'm on the fence, it makes sense that for every set of thumbs it's a visual clue but it does feel odd inserting content via CSS.

    What's everyone's opinions on this?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    :after should be used in the same way that you would use decorative images in that should it be missing then there would be no loss of function.

    If you are supplying important instructions then that should really be in the html. If on the other hand it is just an enhancement that will not cause a problem if missing then :after is fine.

    You will need to decide whether clicking the image is important to you or to your users and then make the right choice. If you want users to click the images then I guess it is important enough to be in the html.

    I would think that asterisks for required fields in forms is also important content and I would use html rather than :after

    In the end it's a decision you have to make for yourself depending on how important you feel that action is.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Paul explained it nearly perfectly ( so what's new).


    A good test for when this is appropriate is look at your page naked ( that is the page is naked not you). Looks aside, does your page make sense/work with CSS turned off. If it does then you are fine, if you are hunting around for your info or have problems navigating... then perhaps some of those style elements should be part of the content!


    In this case I would consider taking a page from a programing technique called: DRY. Dont Repeat Yourself. Since the 'hint' is neither actual content nor UNIQUE to a specific element it would seem that a rule that repeatedly adds the desired text seems apropos.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If its just a tip then go for it.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,281
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    A note, if you are considering screen reader users too, know that some (like VoiceOver) read out CSS-generated content, while most others (the big names like JAWS and Window-Eyes) do not. This falls under Paul's test for "does it belong in HTML or not", but with the additional burden of "will this confuse someone if they hear it?" (this would be cases where you're repeating something hidden with CSS-generated content, which isn't happening in this particular case).

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another solution is to use the title attribute to set the tooltip text if you can.
    You could then use the title attribute to set your :after element content, something like this:

    HTML
    Code:
    <a class="thumbnail" title="Click on thumbnails for larger images"><img src="thumbnail.jpg" /></a>
    CSS
    Code:
    .thumbnail:after {
        content: attr(title);
        display: block;
        background: yellow;
    }
    The best part of this is that you keep the information in the title attribute (which is actually a relevant place for such information), so it will be available to the user regardless of browser features.

    Edit:
    Seems I was in too much of a hurry when reading your post, I think I got your problem wrong. Anyways, maybe this will help somehow.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,281
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by samvike
    so it will be available to the user regardless of browser features.
    Well, no, not at all. Title attributes are broken and have been from the beginning, which is the fault of browser vendors. All of them, with sometimes the exception of Opera. You're idea would really be nice if browsers did allow all users of all devices access to titles.

    The only users who have access to that title attribute are those using a mouse (by this I'm referring to your default/fallback, not your CSS). Touch-screen users might get access when Microsoft's Pointer Events get going at the W3C, maybe. Keyboard users, whether sighted or blind or in between, as well as users of speech-to-text like Dragon, will never know the (usual) title attribute since there's no way to activate it.

    And again also many screen readers and other AT don't read those out (I think they should, and I think the vendors agree since slowly more and more *are* doing it).

    Actually, looking at TomB's post again, I would personally like that instructional text near the heading that heads the thumbnails; that is, above all of them, once. Another problem with the content being in the CSS is when you need translation. For example if you're using templates with {% trans %} tags. We have this problem currently when we have a handful of text bits that get added by Javascript, meaning they're not in the templates. We get a separate Javascipt to go through the page after these bits have been added and transform them to whichever language we're using, but it's definitely a kludge.


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
  •