Hide Text with CSS Best Practice

Question

Let s say I have this element for displaying the website logo   lt div id  quot web-title quot  gt     lt a href  quot http   website com quot  title  quot Website quot  rel  quot home quot  gt       lt span gt Website Name lt  span gt     lt  a gt   lt  div gt   The  web-title would be styled with background url http   website com logohere png   but how to properly hide the text Website Name  As seen here  Hide text using css or here https   stackoverflow com a 2705328   I ve seen various methods to hide the text  such as   web-title span   text-indent  -9999px     or  web-title span   font-size  -9999px     or  web-title span   position  absolute  top  -9999px  left  -9999px     I ve also seen some combine those three methods  But actually which one is the best practice to hide text effectively

User · Answer

Can t you use simply display  none  like this  HTML   lt div id  web-title  gt      lt a href  http   website com  title  Website  rel  home  gt          lt span class  webname  gt Website Name lt  span gt      lt  a gt   lt  div gt    CSS   webname      display  none      Or how about playing with visibility if you are concerned to reserve the space   webname      visibility  hidden

User · Answer

the way most developers will do is    lt div id  web-title  gt      lt a href  http   website com  title  Website  rel  home  gt          lt span class  webname  gt Website Name lt  span gt      lt  a gt   lt  div gt    webname      display  none      I used to do it too  until i realized that you are hiding content for devices  aka screen-readers and such   So by passing    web-title span  text-indent  -9000em     you ensure that the text still is readable

User · Answer

I realize this is an old question  but the Bootstrap framework has a built in class  sr-only  to handle hiding text on everything but screen readers    lt a href     class  navbar-brand  gt  lt span class  sr-only  gt Home lt  span gt  lt  a gt

User · Answer

Another way position  absolute  top  0px  left  -5000px

User · Answer

As of September of 2015  the most common practice is to use the following CSS    sr-only      clip  rect 1px  1px  1px  1px       height  1px      overflow  hidden      position  absolute  important      width  1px

User · Answer

What Google search bot  needs is same content should be served to bot as it is served to user  Indenting text away  any text  gets bot to think it is a spam or you are serving different content to user and bot   The best method is to directly use logo as an image inside your anchor tag  Give an  alt  to your image  This will be perfect for bot to read  amp  also will help in image searching   This is straight from the horse s mouth  http   www youtube com watch v fBLvn WkDJ4

User · Answer

Add  hide-text class to your span that has the text   hide-text  display none       or make the text transparent   hide-text   color rgba 0 0 0 0        use according to your use case

User · Answer

If you re willing to accomodate this in your markup  as you are in your question with the  holding the text   I d go with whatever jQuery UI went with in their CSS helpers    ui-helper-hidden-accessible        position  absolute  important       clip  rect 1px 1px 1px 1px        clip  rect 1px 1px 1px 1px        The image replacement techniques are good if you absolutely refuse to add extra markup for the text to be hidden in the container for the image

User · Answer

I do it like this    hidden-text     left  100     display  inline-block    position  fixed

User · Answer

you can simply make it transparent       width  20px     height  20px     overflow  hidden      color transparent

User · Answer

Actually  a new technique came out recently  This article will answer your questions  http   www zeldman com 2012 03 01 replacing-the-9999px-hack-new-image-replacement   hide-text     text-indent  100     white-space  nowrap    overflow  hidden      It is accessible  an has better performance than -99999px   Update  As  deathlock mentions in the comment area  the author of the fix above  Scott Kellum   has suggested using a transparent font  http   scottkellum com 2013 10 25 the-new-kellum-method html

User · Answer

It might work   hide-text       opacity 0      pointer-events none      overflow hidden

[html] Hide Text with CSS, Best Practice?

Examples related to html

Examples related to css

Examples related to hide