CSS image replacement

Last updated

CSS image replacement is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles. Also named Fahrner image replacement for Todd Fahrner, one of the persons originally credited with the idea of image replacement in 2003. [1]

Contents

With the introduction of CSS web font support in all major web browsers, CSS image replacement is now little used.

Motivation

The typical method of inserting an image in an HTML document is via the <img> tag. This method has its drawbacks with regards to accessibility and flexibility, however:

Fahrner image replacement was devised to rectify these issues.

Implementations

The original Image Replacement implementation [1] described by Douglas Bowman used a heading, inside of which was a <span> element containing the text of the heading:

<h3id="firHeader"><span>Sample Headline</span></h3>

Through style sheets, the heading was then given a background containing the desired image, and the <span> hidden by setting its display CSS property to none:

#firHeader{width:300px;height:50px;background:#fffurl(firHeader.gif)topleftno-repeat;}#firHeaderspan{display:none;}

It was soon discovered, however, that this method caused some screen readers to skip over the heading entirely, as they would not read any text that had a display property of none. The later Phark method, developed by Mike Rundle in 2003, instead used the text-indent property to push the text out of the image's area, addressing this issue:

#firHeader{width:300px;height:50px;text-indent:-5000px;/* ← Phark */}

The Phark method had its own problems, however; in visual browsers where CSS was on but images off, nothing would display.

Also in 2003, Dave Shea's eponymous Shea method solves both of the issues earlier mentioned, at the cost of an extra <span>:

<h3id="header"><span></span>Revised Image Replacement</h3>

By absolutely positioning an empty <span> over the text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency cannot be used with the Shea method.

#header{width:329px;height:25px;position:relative;}#headerspan{background:url(firHeader.gif)no-repeat;position:absolute;width:100%;height:100%;}

Over a dozen different methods has since been developed with varying degree of compatibility and complexity. [2]

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations. For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

A web style sheet is a form of separation of content and presentation for web design in which the markup of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external style sheet file using a style sheet language such as CSS or XSLT. This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup defined both style and structure.

In computing, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the status bar. Site designers can define their own mouseover events using JavaScript or Cascading Style Sheets.

JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications in 1996 to provide facilities for defining the presentation of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology.

A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.

Tableless web design is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents.

In HTML, div and span tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as p (paragraph), em (emphasis), and so on, accurately represent the semantics of the content, the additional use of span and div tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

In HTML, XHTML and MediaWiki, the blockquote element defines "a section [within a document] that is quoted from another source". The syntax is

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

Galen Framework is an open source layout and functional testing framework for websites, written in Java, which allows testing the look and feel of responsive websites. It has its own special language Galen Specs for describing the positioning and alignment of elements on a Web page. It is based on Selenium and could be executed via Selenium Grid for cross-browser testing

References

  1. 1 2 Bowman, Douglas (2003-03-07). "Using background image to replace text". Stopdesign. Retrieved 2011-04-05.
  2. ↑ Mosley, Marie (2015-11-03). "The Image Replacement Museum". CSS-Tricks. Retrieved 30 March 2019.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.