Code Snippets

Replacing CSS Image

In this post will contain a technique to solve an issue with early versions of CSS. For a detailed explanation, refer to this blog post.

Here shows an example of a old CSS with the issue of bug that runs on the iPad:

       .show-image {
         width: 40px;
         height: 40px;
         background: url(../images/my-title-image.png);
       }

        .hide-text {
          text-indent: -9999px;
        }

        <h1 class="hide-text show-image">Hide this text please!</h1>

 

Here is the solution:

       .show-image {
         width: 40px;
         height: 40px;
         background: url(../images/my-title-image.png);
       }

        .hide-text {
          text-indent: 100%; [ get out of the window ]
          white-space: nowrap; [ don't come back in ]
          overflow: hidden; [ no really, don't come back in ]
        }

        <h1 class="hide-text show-image">Hide this text better!</h1>

 

 

Resource Tags: