The topic of scoped CSS styles in HTML5 came up twice in the comments of a recent post by Chris Coyier.
The post itself was discussing the contenteditable attribute, but a few users brought up HTML5’s new scoped attribute, used on the <style> element.
Let’s take a brief look at this future HTML5 feature and see how it might be useful in the ever-changing web development landscape.
Alright, that title might be a bit exaggerated. Flame wars are bad for the community, and I don’t condone them. I think differences of opinion can be expressed in respectful ways that don’t involve unrelated personal attacks. I guess what I really mean to say here is that you can benefit from “heated discussions” that sometimes escalate into flame wars.
But nearly every super-heated discussion (whether in the web design community or elsewhere) has a common denominator: Two opposing sides with valid points of view. It’s unfortunate that sometimes these discussions turn a bit ugly and the actual pros and cons being discussed can go somewhat unnoticed and often forgotten.
Creating a website with HTML5 and CSS3 without having to worry about using techniques like progressive enrichment and polyfills is the ultimate dream for modern-day front-end developers.
But unfortunately, mainly because of the widespread use of IE6-8, that is still just a distant dream. But it is getting closer.
Ever since HTML5 has started to gain wider use, many developers have wondered what syntax style should be most prevalent. When coding HTML in XML format, it was easy–because the validator forced you to code in a consistent manner.
Well, since code validation in HTML5 is a bird of another feather, a consistent coding style is going to be extremely unlikely across the web. While an exact coding style across all sites is not really necessary, I think some level of consistency is in order. People’s concerns in this area are valid.
So here are my own personal point-by-point recommendations for clean and consistent markup, and some reasons behind the decisions.
Here’s something interesting I came across while reading Introducing HTML5 by Bruce Lawson and Remy Sharp, which I recently purchased.
In one of the early chapters, Bruce mentions that when tags are not nested properly, the resulting generated DOM will be seen differently in different browsers. Of course, when you “view source”, the code will be the same in all browsers. It’s when you inspect the page (or view the “generated source”) using developer tools that the results can differ.
After some testing, this is indeed the case. Here’s the code that I tested:
Here’s a nice lesson for web app designers and developers, to help streamline the user’s progress when interacting with your application.
In many cases, it’s enough to log users in and then redirect them to the main screen of the app, where they can then choose what they want to do. It’s also good practice to send them back to whatever screen they were on before they logged in, instead of just sending them to the main screen.
But here’s a way to handle a user log-in when the user has not yet interacted with your pages, as shown below from PayPal:
As anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.
A comment that was posted today on one of my older articles by someone named Stu Goymer actually instigated my research into this, but he raised an interesting point: Why doesn’t the font shorthand property allow the color to be defined?
Well, according to the spec, here’s what the color property is supposed to do:
What?? $3.99 for an iPhone app? Are you crazy? The nerve of some people. Lunatics.
How can you expect me to pay $3.99 for this? Every single iPhone app I’ve ever downloaded is either free or costs 99 cents. Now, you expect me to pay $3.99, and all I’m able to judge it by is a couple of screenshots, a brief description and a few shill-sounding reviews.
I wanted to tweet this, but it was too long for Twitter so I thought I’d just post it as a short piece for the weekend.
For those who haven’t seen the news announcing changes to the HTML5 spec on the WHATWG blog, be sure to read that and some of the comments.
But the funniest and most brutally honest comment belongs to someone posting under the name “Hamranhansenhansen”.
Aesthetics, organization, structure, compatibility, mobile-friendliness, best practices, minimalism, typography, color choice, drop shadows, rounded corners, responsiveness, usability, user experience, CSS3, HTML5, jQuery — none of those things is integral to what ultimately falls into the category of “good design”.
What matters the most — that is, what truly puts anything in the category of “good design” — is whether or not the thing you’ve designed achieves the end result you desire.
