RichStyle: The Angel is in The Detail.

Ideas for HTML and CSS

Ideas for HTML

Sub-Headings Element <subh>

<h1>Foo <subh>Foo</subh></h1>

I currently use <small> element for this purpose.

<h1>Foo <small>Foo</small></h1>

Programing Languages in lang Tag

<code lang="p-python">…</code>
<code lang="p-php">…</code>
<code lang="p-c++">…</code>

p = programming language

New a[rel] Values

<a rel="about | downloads | contact | preferences | jobs | rss | edit | last | first | …">

New Protocol: a[href="cell-tel:…"]

<a href="cell-tel:…">

Since cell phone, unlike land phone, offers SMS.

<richtextarea> Element

As a web component.

A TinyMCE secreenshot
A prototype for a <richtextarea> element,
borrowed from a customized TinyMCE.

Radio List


Check List


Nested <checklist> items here will inherit the parent list-item state (checked or not).

See: Check Boxes and Radio Buttons in HTML6.

Empowering hreflang Attribute

Using this code within the <head> element:

<link rel="alternate"    hreflang="en"   href="?lang=en">
<link rel="alternate"    hreflang="ar"   href="?lang=ar">

… should lead the fllowing anchor element:

<a href="about/" hreflang="ar">About</a>

to match the following link:


Ideas for CSS

Matching The Current URL

a:current {…}

Directionality in Textual Input Controls

textarea {
    direction: auto; /* just like dir="auto" in HTML */

Logical Page Selectors

A partial table of @page sub-rules
A part of Page-Margin Box Definitions

Image source: W3C CSS Page-Media Draft.

A New Media Type Called (Poster)

@media poster {…}

Dialog Buttons

dialog {
    buttons: close || maximize || minimize;

Styling Scrollbars

Dealing with scrollbar as a set of pseudo-elements, using the following CSS rules:

body::scroll-button {…}
body::scroll-button-top {…}
body::scroll-button-bottom {…}
body::scroll-button-start {…}
body::scroll-button-end {…}
body::scroll-handle {…}
body::scroll-pad {…}
Scrollbar pseudo-elements
Styling Scrollbars

Web Icons

.page-about::icon {
    content: char(ℹ);
    font: 10pt RichStyle;
    icon-position: top;

See: Icon Standardization for Web Applications.