In steps CSS3 …

The newest family member to the style sheet family is CSS3. With the possibility of new and exciting things when it comes to designing and how you design, things look hopeful on the horizon. Word on the street is that with CSS3, you can create more diverse styles sheets for large variety of occasions and much much more.  All of this information can be found at css3.info more in depth and detail.

If you don’t want to wade through all the details, here’s a summary for Web developers and Web users broken down into website parts:

Borders

• border-color: in Firefox there is now an option for a fading gray border, a very common effect that is now achieved in somewhat kludgy ways.
• border-image: this feature can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
• border-radius: a new feature in CSS3, which allows you to create round corners on box-items (very sexy stuff … if you’re using Firefox or Safari, check out how that works here, a page that helps you roll your own “themes” on the site of our favorite Javascript library, jQuery).
• box-shadow: another new feature in CSS3, gives you the option of setting up a shadow on a box-item and varying the options … once again, a very common activity that is currently done in unsettlingly dirty ways.

Backgrounds

• background-origin/background-clip: this property is going to be used to calculate background-position of a background in a certain box. A feature in this property is used to determine whether the backgrounds extends into the border or not.
• background-size: You can specify this size in pixels, width and height, or in percentages of a background.
• multiple backgrounds: this snazzy new feature allows the implementation of multiple backgrounds on one element.

Color

• HSL (Hue, Saturation, Lightness): using hexadecimal colors as well as HSL colors are going to be implemented in CSS3.
• HSLA (Hue, Saturation, Lightness, Alpha): similar to the HSL feature it allows a fourth value, which sets the Opacity (via the Alpha channel).
• Opacity: this feature can used by implementing HSLA & RGBA colors.
• RGBA: similar to the HSLA feature where there is now an alpha channel option to create opacity.

Text Elements

• text-shadow: eliminates the need for Photoshop when all you want to do is a simple shadow.
• text-overflow: for this particular feature sometimes when text will have to be clipped you can place a  “…”  to show there’s more text.
• word-wrap: this feature allows the extremely large words or sentences to wrap much cleaner and more efficiently than in previous versions.  For example if the text is in a box you can constrain it to said box.

User-interface

• box-sizing: you can force the browser to instead render the box with the specified width and height.
• re-size: yet another new feature of CSS3 that allows you to deem a box re sizable.
• outline-offset: this new element allows the offset to be rendered away from the edge of the specified element.

Selectors

• attribute selectors:[att^=val],[att$=val] and [att*=val] are the three new attribute options added to the mix in CSS3 to matching substrings in the value of an attribute.

Other Modules

• media queries: this new feature makes it possible to change style sheets based on for instance the width and height of the viewport (such as firefox, iphone, etc.).
• multi-column layout: this feature allows text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns.
• web-fonts: by using @font-face website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.
• css speech: this feature is used for creating style in speech synthesis in aural user agents (e.g. screen readers). There were several additional properties added to this new media type.

In short, it looks as though there are a lot of exciting things on the horizon for Web designers and Web surfers alike.  However, you may not want to go right out and create your first rounded-corner, drop-shadow enabled Web page quite yet, as it’ll be a while before browser software writers agree on, let alone implement, these new ideas (here’s a slightly dated, but pretty darn good compatibility table, in case you’re interested in the details).

But, Rome wasn’t built in a day … and in fact CSS3 will take way less time to adopt than it took to build Rome, so keep your eyes peeled.

Now,  finally,  in an time when half the silly links your friends are sending you are to gems such as videos of guys getting hit in the groin,  a new option is emerging.

To be fair, there are a couple of other alternatives.  RealPlayer was in the mix for a while,  but was widely known for being an obnoxious piece of software that nobody really wanted on their computer,  and,  although it’s still around, it’s fallen from favor and is far from the top of the online video player plug-in list.  More recently,  one of the software world’s great titans,  Microsoft,  has gotten a bit of traction promoting its Silverlight technology, which was built as a head-on competitor to Adobe’s Flash.

Notice a common theme?  If you said,  “Each one of these options is being offered by an entity with revenues that rival the GDPs of most small island nations” , then we’re on the same page.  If you also wondered if their motives are altruistic or born of self-interest, then not only are we on the same page, we’re on the same paragraph.  Luckily, we don’t even have to feel funny about our cynical musings,  because we’re in good company … quite a few distinguished members of the open source community,  savior of all that is good on the Internet,  have been thinking along the same lines.

If you’re a Firefox user and you’ve recently upgraded your browser, you may have noticed a note on the “what’s new” page stating that your sexy, newly updated browser supports “open video formats.”  This is code for “now people can build web pages for you that contain video,  require no plugins,  don’t require the web page creator to pay for special software to encode the video, and can be put up with way less effort than the proprietary stuff.”

All this bodes well not only for our penchant for guy-getting-kicked-in-the-groin videos, and for Web innovation in general.  Bold claims?  Here are some points you should know about “how”, “why” and “who” that,  I hope, will convince you:

• Open Source Innovation:  The video format being supported when most people talk about “open video” goes by the curious name of Ogg. I know,  it sounds like what a couple of nice cave people might name their first child,  but the technology is quite the opposite of pre-historic.  The video and audio “layers” that can tag along with the Ogg file format (called Theora and Vorbis,  respectively … props to the folks naming this stuff!) are,  along with Ogg itself,  are all completely open.  Patent-free,  royalty free,  and open to anybody who wants to see or even contribute to the guts under the hood.  Once adopted by many contributors,  as Ogg has been,  this sort of openness leads to rapid innovation.  Case in point: Ogg used to be slower/bigger than the proprietary formats that dominated the online video world,  but now, thanks to developer contributions,  it’s at least as fast/small as the closed formats,  if not a tad better in both areas.
• Big Support From Big Players. Not everybody is lining up to support this particular open standard.  Namely, Microsoft and Adobe are not especially eager to promote a technology that could eat their proverbial lunches by squashing their competing technologies (Silverlight and Flash).  But, Google, Firefox, Opera and even Apple (in Safari) are getting behind open video with Ogg.   Every organization on that list is interesting, but can you guess which one of them wins the “wow, that’s going to really make a difference” category?  Here’s a hint: it’s the same company that owns YouTube, the world’s most popular online video website … Google.  If they stay committed (and it looks like they will) then there’s a good Ogg will take hold.
• Tagging Along With the Next Big Thing.  Open Web video standards are closely associated with the still-being-hatched standard called HTML 5.  Pretty boring acronym for the technology being described as “the biggest leap forward in web standards in almost a decade.”  This is the real deal … older HTML spec advances have made the Web a better place to publish content, but this one aims to turn your Web browser into a full fledged application platform,  as good as your desktop,  with full-fledged,  standardized,  tricked out video, audio,  interactivity,  animations.  In other words,  real applications in your browser … and guess who is, once again, throwing their momentous weight behind it?  Google has already done a fine job of building a suite of fine web-based applications,  and has been pushing the idea of Web-as-a-real-application-platform for a while now.  And video is an integral part of that platform.

Those are some random thoughts on the topic (ok, maybe part of the title reading “the Future of Everything” was somewhat exaggerated),  and,  as always,  I’d love to hear more thoughts on the trend from anybody who’s inclined to comment.