SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a structure that is invisible without css but can be made visible with css?

    Hi!

    Is there an XHTML structure or comment or whatever that is invisible for users without css, but that can be made visible with the help of css

    The reason I am asking this is I want to hide a construct to users without css support but only show it when css support is available (the opposite is possible with display: none of course).

    Thanks

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, but you could use the 'content' property in the style sheet.
    Code:
    body::before { content:"This text is only present when CSS is enabled."; }
    However such text is to be considered stylistic and not as content. Content should be in the markup.

    Why do you need this?
    Simon Pieters

  3. #3
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To hide some specific content to users without CSS support.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aqw
    To hide some specific content to users without CSS support.
    I think what Simon was asking was why would you want to do this?

    What are you trying to achieve by hiding content from a user without CSS?

    Surely someone without CSS should receive exactly the same thing or you aren't really making your site accessible.... In my eyes it'd be like putting up a high wall at a zoo so that anyone in a wheel chair can't see over.

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Could make it work without CSS first can't you?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, I've needed it before as well.

    I have a list, and I use CSS to give the list items certain properties (different coloured borders etc) which mean differnet things. I also have some hidden text (hidden to those with styles on) with the same information in. At the top, I have a legend explaining what the different coloured borders mean - but this legend is only applicable to those with styles on - those with them off use the text instead.

    There is an example, doesn't compromise accessibility, perfectly legit, no?

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have the example available to view? I'd say that this is perfectly acceptable as both would have the same user experience however I'd probably be inclined to do it with icons which you could then have a key for and aslong as you display the images as foreground images within the page then all users would see this whether they are capable of viewing CSS or not.

  8. #8
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://www.nugc.net/flylist.php

    With icons though, a screen reader woudlnt tell the difference surely? Unless you used the alt text, I guess.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly, you'd use alt text to describe what the image meant and I think it'd make that page a whole lot more readable by having an icon for duty comittee member and another for paid petrol money so that you don't have to refer to a key.

  10. #10
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Probably, yeh. I'll look into that at some point.

    Still, it proves there is a valid use for the original point, I reckon.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, valid use maybe and probably not unaccessible but I would argue that there were easier and more effective ways of achieving the same thing.

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So on that page, how do you know without CSS which are Duty Committee Members and Paid Petrol Money?
    Simon Pieters

  13. #13
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There is text next to each name that is hidden with styles turned on, but visible when the styles are off.

    Turn styles off and see, or view the source.

    The page was only something I quickly hacked together, I need to rewrite it & have the information coming from a database eventually. I'm not even sure I like the look of it as it is at the moment.

  14. #14
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only problem with it is that the legend still displays which obviously has no meaning without the styles but I think we've already established that this would be a good case for hiding parts of the page to users without styles.

    I personally think that it's a whole messy area that you're getting into by trying to achieve anything like this and there's much better alternatives. You could also use tables for this with <th> for your paid and commitee members as you are essentially trying to display table information.

    I'd either go down that route for this problem or use the icons next to each item in the list to display the status of each person.

    I'd be interested to hear what the problem the person who initially posted this thread is trying to solve as there's more likely than not to be better alternatives to them than trying to hide content from users without CSS.


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
  •