html5 semantics tagged Articles …

CSS3 Attribute Selectors

The power of CSS Selectors can not be understated; for, without them, there would be no simple means by which developers could target specific elements for styling in a manner abstracted from, or external to, the actual markup to which the styles will bind.

In addition to some of the more common Simple Selectors, such as Type Selectors, Class Selectors and Id Selectors, we have have Attribute Selectors, which, as the name implies, allow us to match elements based on their attributes.

Attribute Presence and Value Selectors

CSS2 introduced four Attribute Selectors; referred to as Attribute Presence and Value Selectors, which allow for coarse grained matching of specific elements based on their attributes and / or attribute values. These include the following:

e[attr]
Where e is an element and [attr] is an attribute of element e. For example, p[title] would match all p tags with a title, regardless of the value of the title.
e[attr=val]
Where e is an element and [attr=val] represent an attribute of element e which contains the exact value of val. For example, p[title="Example 1"] would match all p tags with a title which equals “Example 1″ exactly.
e[attr~=val]
Where e is an element and [attr~=val] is an attribute of element e which has a value containing a whitespace-separated list of words, one of which equals val exactly. For example, p[title~="Example-1a"] would match all p tags with a title containing the word “Example-1a” in a list of whitespace delimited words.
e[attr|=val]
Where e is an element and [attr|=val] is an attribute of element e that has a value of val exactly, or begins with val immediately followed by a hyphen “-“. For example, p[title!="Example"] would match all p tags with a title containing the word “Example-“, followed by any other value, such as “Example-1″, “Example-A”, etc..

View Example

Substring Matching Attribute Selectors

In addition to the above Attribute Presence and Value Selectors, CSS3 expands on this by defining three additional Attribute Selectors; referred to as Substring Matching Attribute Selectors. These additions allow for fine grained matching of specific elements based on their attribute values.

In simplest terms, the new Attribute Selectors in CSS3 can be used to match an element with a given attribute whose value begins, ends or contains a certain value. The following is a basic description and example of each new Attribute Selector:

e[attr^=val]
Where e is an element and [attr^=val] is an attribute of element e which contains a value that begins with val.
e[attr$=val]
Where e is an element and [attr$=val] represent an attribute of element e which contains a value that ends with val.
e[attr*=val]
Where e is an element and [attr*=val] is an attribute of element e which has a value that contains val.

View Example

To summarize, there are a total of seven Attribute Selectors in CSS3, three of which are new. Whether used for general matches, such as global Attributes; e.g. *[hreflang|=en] or more specific matches, such as chaining; e.g, a[href^="https"][target="_blank"], Attribute Selectors provide a powerful mechanism for selecting both general and specific content within a page.

HTML5 Elements: The <base> Tag

The HTML5 Specification introduces many new semantic elements, as well as specifications for existing elements; one of which is the <base> Tag, which allows for specifying a root URL from which all linkable elements in a document (hyperlinks, images etc.) are based, as well as a default target for all linkable elements.

Overview

  • The <base> Tag provides two attributes; href (Hyper-text Reference) and target, respectively, which have the same semantic meaning as that of a hyperlink.
  • Only a single <base> Tag is to be defined per page and, must be defined before any elements which except a URL are defined (other than the html element).

Note: While the <base> Tag is not new to HTML5, the changes to the a Tag implies a difference (albeit, marginal) as, a Tags are always hyperlinks, or placeholders for hyperlinks.

Example

Like all HTML markup, usage of the <base> Tag is easy and straightforward: Simply add a single <base> Tag in the <head> element of the document and define either a base URL and / or default target attribute.

Defining a default base URL and target:

The above links will all default to a blank target (new page), with each link’s base URL defaulting to “http://somedomain/app”. Individual links can override the base URL as well as the default target.

Support

The <base> Tag is currently supported by all major browsers.

HTML5 Semantics: The contenteditable Attribute

The HTML5 Specification introduces many new semantic attributes in addition to new semantic elements. One particularly interesting addition is the introduction of the contenteditiable attribute, which can be found under the User Interaction Specification in Section 7.5.

A Brief Overview

The contenteditiable attribute allows for the editing of content within any valid HTML5 element. By default, elements implicitly inherit edibility from their parent element unless explicitly defined.

The API

The contenteditiable attribute is an enumerated attribute with three states which map to the four keywords:

true
The true state indicates that the element is editable; it is specified by the ("" Empty String) or true keywords.
false
The false state indicates that the element is editable; it is specified by the false keyword.
inherit
The inherit state indicates that the element is editable if it’s immediate parent element is editable.

Examples

The following examples provide basic “live” demonstrations and source implementations of the contenteditiable attribute. (Note: These examples assume an HTML5 compatible Browser which support this attribute.)

A basic editable element

This content is editable, try it.

A basic nested editable and non-editable element

  • By default, this content is editable via it’s inherited parent elements value.
  • This content is not editable via it’s explicit contenteditable value.

Outline Styles

Setting editable element outline styles with CSS attribute selectors:

Complete example

run

Some Concluding Thoughts

As you can see, enabling and disabling an editable element in HTML5 is quite simple with the addition of the contenteditiable attribute. This allows for some very interesting possibilities when implemented in conjunction with many of the other new features in HTML5; specifically, the Web Storage API and the spellcheck attribute.