JavaScript Style Sheets

Last updated
JavaScript Style Sheets
Internet media type
text/javascript
Developed by Netscape Communications Corporation
Type of format Style sheet language
Standard Netscape's JavaScript-Based Style Sheets submission to the W3C

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

Contents

Although Netscape submitted it to the World Wide Web Consortium (W3C), the technology was never accepted as a formal standard and it never gained acceptance in the web browser market. Only Netscape Communicator 4 implemented JSSS, with rival Internet Explorer choosing not to implement the technology. Soon after Netscape Communicator's release in 1997, Netscape stopped promoting JSSS, instead focusing on the rival CSS standard, which was also supported by Internet Explorer and had a much wider industry acceptance.

The follow-up to Netscape Communicator, Netscape 6 (released in 2000), dropped support for JSSS. It now remains little more than a historical footnote, with web developers generally unaware of its previous existence. The proposal did not become a W3C standard.

Syntax

Using JavaScript code as a stylesheet, JSSS styles individual element by modifying properties of a document.tags object. For example, the CSS:

h1{font-size:20pt;}

is equivalent to the JSSS:

document.tags.H1.fontSize="20pt";

JSSS element names are case sensitive.

JSSS lacks the various CSS selector features, supporting only simple tag name, class and id selectors. On the other hand, since it is written using a complete programming language, stylesheets can include highly complex dynamic calculations and conditional processing. (In practice, however, this can be achieved using JavaScript to modify the stylesheets applicable to the document at runtime.) Because of this JSSS was often used in the creation of dynamic web pages.

Example

The following example shows part of the source code of an HTML document:

<styletype="text/javascript">tags.H1.color="red";tags.p.fontSize="20pt";with(tags.H3){color="green";}with(tags.H2){color="red";fontSize="16pt";marginTop="4cm";}</style>

Similar to Cascading Style Sheets, JSSS could be used in a <style> tag. This example shows two different methods to select tags.

Browser support

Javascript Style Sheets were only supported by Netscape 4.x (4.0–4.8) but no later versions. No other web browser has ever integrated JSSS.

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

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

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

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

<span class="mw-page-title-main">Bookmarklet</span> Web browser bookmark containing JavaScript code

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.

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.

The blink element is a non-standard HTML element that indicates to a user agent that the page author intends the content of the element to blink. The element was introduced in Netscape Navigator but is no longer supported and often ignored by modern Web browsers; some, such as Internet Explorer, never supported the element at all.

<span class="mw-page-title-main">Same-origin policy</span> Security measure for client-side scripting

In computing, the same-origin policy (SOP) is a concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model (DOM).

In computing, quirks mode is an approach used by web browsers to maintain backward compatibility with web pages designed for old web browsers, instead of strictly complying with web standards in standards mode. This behavior has since been codified, so what was previously standards mode is now referred to as simply no quirks mode.

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.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

<span class="mw-page-title-main">CSS animations</span> CSS3 properties that would let some HTML elements animate

CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.

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

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling 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.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

<span class="mw-page-title-main">Less (style sheet language)</span> Dynamic stylesheet language

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. Less is an open source project. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

References

  1. 1 2 Håkon Wium Lie; Bert Bos. "Chapter 20 - The CSS saga". World Wide Web Consortium . Retrieved 23 June 2010.