ansaurus

Question

Answer 1

+2 A:

No, you shouldn't. Those attributes are deprecated for a reason. There are better ways to work around these sorts of problems. As others suggested, have Javascript detect if CSS is disabled so it won't make the changes in those cases.

Normal users who disable CSS expect to see things not exactly as the creator intended. To handle users who are instead using alternate browsers (such as blind users) make sure you fully and accurately populate the ALT tags of images, etc.

Eddie 2009-01-27 03:28:59

what! if someone hasnt got css enabled are they likely to have javascript enabled

Simon_Weaver 2009-01-27 04:14:53

This is the case the author of the question is asking about. I agree it's not likely.

Eddie 2009-01-27 04:50:34

Answer 2

+10 A:

I usually insert the heading image via CSS too.

<h2 class="my-heading"><span class="hide">My Heading</span></h2>

and then

.my-heading {
    width: 100px;
    height: 24px;
    display: block;
    background: #fff url(image/my-heading.jpg) top left no-repeat;
}

.hide {
    display: none;
}

so that users in no-CSS environment got the text version one.

edit: Thanks for d03boy for providing a better alternative to do this (text-indent: -9999px;) and Karan Bhangui for pointing out the missing stuff (my bad). Check comment section.

edit 2: Thanks Traingamer. I'll be sure to double-check next-time. ;)

andyk 2009-01-27 03:31:20

I use text-indent: -9999 to hide text

Joe Philllips 2009-01-27 03:47:34

ya, the span is unnecessary as mentioned above. Secondly, doesn't the header need a `display: block`?

Karan 2009-01-27 03:57:27

yup, that's a nice way too. As long as the text is hidden and the image brought in via CSS, well you got the point. :)

andyk 2009-01-27 03:58:48

uh oh, I forgot. Thanks Karan.

andyk 2009-01-27 04:00:11

I'm sure you meant .my-heading rather than #my-heading - good answer, though. Using css for both the background and a default background color will give the desired results.

Traingamer 2009-01-27 19:14:17

Answer 3

+1 A:

Add some intelligence to your JS. I dont know how to do it in JS, but detect if CSS is disabled and then do something different in response. The JS is to blame for making your page unreadable, so it should have the solution. Putting the fix in a style tag just causes more complexity.

For instance, someone without CSS very well might also not support a style tag! Also, it could be a blind user with a screen reader, and them not having any text at all and an image instead is rather insulting. Better set your ALT text etc.

Karl 2009-01-27 03:31:35

Answer 4

+1 A:

A non-coding solution:
How about adding a dark edge around the heading image? In normal dark background, the dark edge around the heading image/text won't be too obtrusive; meanwhile when css is disabled, the heading image/text is still readable as outlines.

billyswong 2009-01-27 04:29:49

Would be a headache though if the site use a non-plain background (eg. gradients). Nevertheless, good point.

andyk 2009-01-27 04:55:33

ansaurus

tags:

views:

answers:

Designing pages with CSS disabled

related questions