Archive for HTML/CSS

Limitations of HTML5, or the Lack Thereof

I recently happened upon a challenge to recreate a button created in Flash in HTML5 via reddit (and actually via popurls). I was actually really excited because I wanted to practice some work using HTML5′s canvas element.

However, and someone beat me to the punch with their button.

Though I’m tempted to revisit the button creation (and I might in some downtime this weekend), I think the important part here is to realize that HTML5 is really the answer to a lot of problems. Adobe has a good reason to be worried in regards to Flash. Not only is it battling Apple, many developers are leaving it to pursue solutions that are standards; solutions that will work in many environments and on many devices.

Video, the biggest reason to use Flash, is being phased out where it can be by the largest video site out there, YouTube, in favor of HTML5. Granted, it is still in beta, but it is a sign of things to come.

Adobe, as a company, is by no means on fragile ground – they clearly have plenty of other products that corner their respective markets. However, it seems that Flash has had its day, and more and more, can be replaced with a combinations of HTML5, JavaScript and CSS. Now we just need to work for Microsoft to catch up with IE9…

No comments, be first...

Styling Code Elements with CSS

A lot of sites use the <code> tag to format pieces of code. However, what do you do if you want to do a code block, like:

body {
    some css stuff
}

I personally use <pre><code>. This way, I can take some code and paste it in and it will look like my normal code.

One thing to make sure is that <pre><code> are just like that, on the same line as each other and on the same line of the first line of code text. Otherwise, you end up with an extra line you don’t want because of the <pre> element.

For an example, here’s the css I use for that code block:

pre code {
    font-family:monospace;
    margin:10px 25px;
    padding:10px;
    border:1px solid #aaa;
    color:#336b45;
    display:block;
    font-size:1.1em;
}

Ta da!

No comments, be first...