mikestreety » HTML/CSS

HTML5 – Explained. Briefly

Mike — Tue, 07 Feb 2012 13:41:43 +0000

After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind

<small>

elements.

So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what’s what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].

Before you can use any of these elements – you should really use the HTML5 Shiv – found in my basic HTML5 Template.

If you get stuck – HTML5 Doctor created this simply amazing flowchart

<nav>

are all self explanatory

- This is content which is related to one another. I.e. a ‘section’ of quotes, sections of a tabbed interface.

- Should be a self contained piece of content

<aside>

- Should be something that is tangible to the content, or something like a sidebar or ad space. It should not contain main content.

<h1>

- These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each

should have one.

- perfect for an image and caption. Would be marked up like:


 An image

<b>

- can be used to make something bold, without it being significant – e.g. showing a change in a lump of code

<i>

- for use in the case that you want italics, but not for emphasis – e.g. “Hello” he said

<small>

can still be used to show text that is smaller, than the rest – e.g.

<small>Copyright Mike Street</small>

<a>

- can now be around block elements!

HTML5 Template with jQuery

Mike — Mon, 23 Jan 2012 19:44:02 +0000

A useable, simple HTML5 template with jQuery included. By no means a replacement for the HTML5 Boilerplate, but a quick simple something to get you started!

Text Area Non-Resizeable – Firefox and Chrome

Mike — Wed, 29 Jun 2011 08:34:03 +0000

Firefox and chrome both now feature the ability to have their textareas re-sized. This function can be turned off, or adapted with some simple css.

To turn the feature off, include the following line in your css:

textarea {
    resize: none;
    }

There is also horizontal or vertical only resizing available. The next example is to force the textarea to only be re-sizable on the vertical axis.

textarea {
     resize: vertical;
     }

Alternatively, if you want to let your users re-size the textarea, but only to certain widths or heights, the textareas obey the max- and min-height/width properties:

[CSS]
textarea {
max-height: 400px;
max-width: 400px;
}
[/CSS]

HTML5 Template with jQuery

Mike — Thu, 26 May 2011 10:08:26 +0000

This post has been updated

Just wanted to have a quick resource for starting a HTML5 based page. I have included jQuery as so many sites seem to use it these days!

If you can think of anything else that should be added – feel free to get in touch!

Twitter Style Glow on Input Focus

Mike — Mon, 09 May 2011 15:01:18 +0000

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code.

The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the effect. On the :focus style, the appropriate web browser prefixed CSS is required, but you get the general idea!

[CSS]
input {
border-radius: 5px;
border: none;
outline: none; /* Get Rid of the Webkit Default Glow */
}
input:focus {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* -webkit/-moz prefixes needed */
}
[/CSS]

Redirect to one central domain – htaccess

Mike — Mon, 21 Feb 2011 14:55:50 +0000

If you would like to ‘redirect’ all your users to a central domain (for example if you would like all users to browse your site with the www or you have several parked domains) then paste the following code into your .htacces file (normally located in the root) – works on Linux servers with cPanel.


RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !=www.codehorse.co.uk
RewriteRule ^(.*)$ http://www.codehorse.co.uk/$1 [L,R=301]

Change the domain where appropriate. In English this says if its not codehorse.co.uk then redirect to codehorse.co.uk.

This is especially good for SEO purposes as it means google does not see duplicate content if you have several parked domains, or if you have flash on your website which generally requires the www. prefix to work

Using PHP to get the dimensions of an image

Mike — Fri, 04 Feb 2011 11:26:20 +0000

The following code will get the dimensions of an image:

I found this useful when using a lightbox to load an image that I didn’t initially know the size of, to ensure the lightbox positioned itsself in the middle, based on the height and width of the image.

The contents of $attr is useful for slotting straight into an

tag, like so:

" />

This will produce, for example:

Develop, Style or Add Content to a Live Site

Mike — Tue, 21 Dec 2010 15:01:17 +0000

If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it.

If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy and paste the below code into wherever you need to add/change.

You can put anything in between the PHP, Including CSS, HTML and PHP. If you need to replace something rather than add, simply adapt it to be an ELSE statement like so:

To access the extra content, navigate to www.yoursite.com/anypage?test. To change ‘?test’ to any other word, edit the first line of the PHP.

This is also helpful for use with contact forms (sending the user back to your contact page with ?thanks in the URL or similar and replacing the contact form with a message), or sending users to different links on the same page to reveal codes or links.

Drop Shadow

Mike — Thu, 16 Dec 2010 11:03:17 +0000

These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.)

However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power and should be used sparingly.

The .net magazine article can be found here: CSS3 Techniques

Box Shadow:

-moz-box-shadow:0px 5px 5px #333333;
-webkit-box-shadow:0px 5px 5px #333333;
box-shadow:0px 5px 5px #333333;
/*IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333')";
/*IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333');

Text Shadow:

text-shadow:2px 2px 2px #333333
/*IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333')";
/*IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333');

Reset CSS

Mike — Thu, 16 Dec 2010 09:43:38 +0000

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select, textarea { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus, :active {outline: none;}

 /*The elements below get reset but generally want to have the default settings */
strong {font-weight: bold;}
em {font-style: italic;}
input, textarea, select {padding: 3px; border: 1px solid #ccc;}

This reset css has been slightly adapted and adjusted from the original reset css created by Eric Meyer. If you have any suggestions or improvements, let us know.