Designer News
Where the design community meets.
UX Developer Joined over 7 years ago
It's so great to see people like Ethan finally blogging about this exciting area of responsive web design :D
I've been using http://containerqueries.com to build layouts for a couple of years now and it feels like I'm living in the future!
I think the advice is never to have the instruction be present only as the placeholder. Nothing is more annoying than having to empty a field to check what you were supposed to enter into it.
Why not use a solution that says: display a label and a placeholder, and any time an input isn't empty, display the placeholder text inside the element. Any time a field has text in it, display that placeholder somewhere else visually near the field.
<label> <input placeholder="Enter your Name"> </label> <style> label:after { display: block; font-family: sans-serif; font-size: 9pt; color: #999; } @element 'input' and (min-characters: 1) { $parent:after { content: 'eval("placeholder")'; } } </style> <script src=http://elementqueries.com/EQCSS.js></script>
There's one quick solution!
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Hey Thomas! A lot of the functionality does overlap with EQCSS, but the mechanism how this CSS reprocessor works is a little bit different. The marriage between JS and CSS is a lot simpler with reproCSS - all JS interpolation is global, where in EQCSS we tried our hardest to scope the evaluation of the JS to the element you were styling.
Many of the same techniques should be possible across both, though the syntax will differ :D