CSS State Transition

dabblet.css

/* CSS State Transition 
  This is all for appearance. 
  The important CSS is inline with the HTML */
style { font-family:monospace; margin:1em; white-space:pre;
  display:block; max-height:0; transition:max-height 125ms; overflow:hidden }
style:before,
[href^="#"]:before { display:block; font-size:.786rem; opacity:.381 }
style:before { content:'<style>' }
style[id]:before { content:'<style id='attr(id)'>' }
:target ~ [href^="#"]:before { content:'<a href='attr(href)'>' } 

body { margin:1rem auto; max-width:35rem }
code { font:500 1.272em monospace }
footer { margin:1.618rem 0; text-align:right }

h1,h2{margin:1.618rem 0 calc(1.618rem/2)}
h1{font-size:2.618rem;opacity:.381}
h2{font-size:2.058rem;opacity:.618}
*{font:300 1em/1.618rem FontAwesome,Segoe UI,Avenir;text-transform:none;
text-decoration:none;letter-spacing:-.01em;word-spacing:.038em;margin:auto}

body:before { content:'select Result to see only the article ↑'; display:block; font-size:smaller; text-align:right }

dabblet.html

<h1> CSS State Transition </h1>
<p> With only HTML and CSS (no JS), there are two very basic ways to make a page receive user input and reflect state.
<p><a target=_blank href="https://twitter.com/intent/tweet?text=It+seems+%23CSS+offers+only+2+ways+to+get+input+and+reflect+state,+and+they+are+incomplete.+%0A%0A%E2%80%94http://bit.ly/css-states">
It seems CSS offers only two ways to get input and reflect state, and they are incomplete.</a>

<h2> Using :checked </h2>
<p> The <code>:checked</code> selector combined with the adjacent sibling (<code>+</code>) selector 
can toggle a rule based on user selection.
<p>
<label for=toggle>Show example</label>
<input type=checkbox id=toggle>
<style>:checked + style { max-height:5rem }</style>

<h2> Using :target </h2>
<p> The <code>:target</code> selector refers to a page link target and can be used for emphasizing the linked content.
<p>
<style id=show-example-2>:target { max-height:13rem }
</style>
<a href="#show-example-2">show example</a>
<a href="#hide-examples">hide examples</a>
<p> Using <code>:target</code> has the advantage that state can be saved 
and shared via a URL, which is the most intuitive and simple.
<p> The downside is that toggling requires another target to clear 
the current one.
<style id=show-example-3>
:target ~ [href^="#show-"],
[href^="#hide-"] { display:none }
:target ~ [href^="#hide-"],
[href^="#show-"] { display:block }
</style>
<a href="#show-example-3">show example</a>
<a href="#hide-examples">hide examples</a>
<p>Visual feedback comes at the cost of duplicating rules to show and hide,
as a link cannot "unlink" by selecting it again.
<p>It is also much more complicated this way to manage simultaneous states that radio
or checkbox inputs handle natively.
<p>If that were not enough already, targets scroll the content which is probably
not what we want in this scenario.

<h2> Why is this a thing? </h2>
<p> At the core, the web works through inputs (values) and anchors (places).
It would be extremely light to implement something only using HTML and very
selectively use CSS for typography and color, while natively also providing
a way to interact with an interface more dynamically.
<p> Unfortunately, outside of these two cases it is necessary to use a
programming language (JavaScript) to handle the logic, which tends to
grow unbounded and cause more trouble than it solves in the long term.
<p> As evidenced above, each case has limitations that the other solves (toggle vs deeplink),
which are important basic constructs for interactions: toggle is the most intuitive
control (same switch for on/off), while deeplink allows sharing and saving state through the URL only.

<footer>
&mdash;<a href="//twitter.com/darkgoyle" target=_blank>@darkgoyle</a> 2015

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}