CSS Counters – The Right Way to Organize Your Ordered Content

via CSS Counters – The Right Way to Organize Your Ordered Content.

It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos 😀

So, let’s rock!

Continue reading

Advertisements

Reach viewers on mobile devices, everywhere

The tag in HTML5 is a great thing. It enables native video playback in all current browsers, rather than relying on a plugin like Flash. It opens the door to web video on devices that don’t support Flash. And it enables codecs that previously weren’t web playable.

But if you’re publishing video content, this can be confusing. To really support web video, how many output versions do you need to create? WebM, Ogg, and MP4? What about iPhone or Android? What about low/medium/high bitrate versions?

There isn’t a single answer to this question, so here is a short guide to picking outputs for HTML5 video.

Continue reading

SimpleBits / CSS3 For Web Designers

via SimpleBits / CSS3 For Web Designers.

For the fourth time in my life, I’ve written a book. It’s titled, CSS3 For Web Designers and it’s available today in paperback and ebook formats from A Book Apart. I couldn’t be more excited, seeing this little green thing launch after months of planning, writing, editing, fretting. I certainly didn’t do it alone.

book cover

Photo by Jason Santa Maria

Continue reading

Make HTML 5 Video Work in All Browsers Including Mobile

via Make HTML 5 Video Work in All Browsers Including Mobile | Blackstone Blog.

There are a number of post circulating the web on how to make the HTML5 video tag work… but most of them focus on either desktop browsers, or how to get HTML5 video working in a mobile browser. No one had straightforward steps on how to make HTML5 video work in every browser AND the major mobile browsers. Never fear, I have pieced together code and tricks from many different resources and have compiled a complete step by step process to getting HTML5 video working across all browsers.

Continue reading

Web 3.0 (A List Apart: Articles)

Web 3.0by Jeffrey Zeldman

via A List Apart: Articles: Web 3.0.

Google, with the cooperation of prestigious libraries, has been digitizing books to make them findable. The practice excites futurists but angers some publishers. Of necessity, digitization creates virtual copies. The publishers claim that such duplication violates copyright, even if the book’s content is hidden from the public. The New York Public Library, one of Google’s partners in the project, recently hosted a public debate on the subject.

It was while attending that debate that my discomfort with the hype surrounding an emerging genre of web development turned into a full-blown hate-on.

The big room was packed. There were more ticket holders than chairs. Yet the seat in front of me remained empty. Each time a hopeful standee approached the empty chair—and this happened every few nanoseconds—the poor schmoe seated next to it had to apologetically explain, “Sorry, the seat is occupied.”

It soon became clear that the kindly schmoe was reserving the seat, not for a friend or colleague, but for a stranger who had imposed that duty on him. While the kindly fellow defended the other man’s throne against a steady stream of resentful ticket holders, the stranger was off somewhere knocking back the library’s free champagne. I wondered what kind of jackass would ask someone he didn’t know to save his seat for thirty minutes at an oversold event. When he finally arrived, I found out.

Continue reading

The article element

via The article element | HTML5 Doctor.

We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them.

What the spec says

Thankfully, the spec is short and sweet:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

W3C Specification

Continue reading

Better Semantics with CSS Combinators & Selectors

Better Semantics with CSS Combinators & Selectors

via Better Semantics with CSS Combinators & Selectors » HTML & CSS, Layout » Design Festival.

I’m going to begin with a provocative claim: I believe CSS is one of the most difficult-​​to-​​master computer languages we have. It doesn’t have a complex syntax and you certainly don’t need a doctorate in IT to understand it. However, it’s one of the only popular languages that isn’t “logical” — and I mean that in the most literal sense.

Unlike other familiar web development languages such as JavaScript, PHP or even SQL, problems aren’t worked out via common logic. Spoken algorithms like “if X then do Y, otherwise do Z” or “select all of Y then do X with them” don’t translate to a language like CSS. Simply put; it’s a styling language. A language for designers, not developers. Some of the most experienced programmers I’ve worked with struggle to comprehend CSS for this very reason.

Continue reading

A Brief Introduction to Web 3.0

If you ask some, they’ll tell you Web 2.0 as we know it is probably on its way out the door. For many, Web 2.0 is characterized mainly by the ability of users to share information quickly with others, which has been developed into the phenomenon that we call social media. From Twitter to Facebook to YouTube and to all sorts of other kinds of communities, Web 2.0 is all about sharing and seeing. Now if you recall or were around during what is now known as Web 1.0, information was put up on a website and that was it–the best way of sharing it was privately through e-mails and such. There was little to no communication and if you wanted information, you had to go to the source for it. Can you imagine such a harsh internet? Now with Web 2.0 on it’s way out, the obvious question is, what in the world is Web 3.0 going to be?

A Brief Introduction to Web 3.0

Continue reading