All geek questions in one place

Designing CSS Disabled Pages

I'm currently developing a site that uses a dark background, and just out of interest, I turned off CSS and looked at it. Since it was highlighted semantically, without styles, it is still a consistent document, except for the fact that my caption images are white and the default background color is also white, you cannot see the captions at all. (The headers are marked as h1 / h2 / h3, and then Javascript replaces them with images).

Now I know that this is a tiny extreme case of users who do not have CSS but have javascript, so this is a much more theoretical than practical question, but I have to go back to the old and outdated way to set the background colors:

<body bgcolor="#333333">

.. so you can still see the white images?

+3
source share
4 answers

I usually embed the header image through 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 users in a non-CSS environment get a text version.

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

edit 2: Thanks Traingamer . I will definitely check next time.;)

+10
source

No, not worth it. These attributes are deprecated for some reason. There are better ways to get around these problems. As suggested by others, Javascript detects that CSS is disabled, so it will not make changes in these cases.

, CSS, , . , (, ), , ALT ..

+2

JS . , JS, , CSS , - . JS , , . .

, - CSS ! , , , . ALT ..

+1

Non-coding solution:
How about adding a dark edge around the header image? In a normal dark background, the dark edge around the image / title text will not be too intrusive; Meanwhile, when css is disabled, the header image / text can still be read as outlines.

+1
source

Source: https://habr.com/ru/post/1702288/

More articles:


All Articles