2017-01-07

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

<radiolist>
    <li>…</li>
    <li>…</li>
    …
</radiolist>

Check List

<checklist>
    <li></li>
    <li></li>
    …
</checklist>

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:

about/?lang=ar

Ideas for CSS

Matching The Current URL

a:current {…}

Directionality in Textual Input Controls

input[type="text"],
input[type="search"],
textarea {
    direction: auto; /* just like dir="auto" in HTML */
}

Logical Page Selectors

start instead of left.
end instead of right.

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.