QUICK TIP: Enable Gzip compression server-side whenever possible; it shrinks the size of files such as CSS and JavaScript without removing any of the content.

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Quick Tip

A few handy external links…

BROWSER SIZES

http://browize.com

http://ipadpeek.com

http://resizemybrowser.com

BUTTONS

http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials

http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques

http://www.performable.com/buttons/

http://css-tricks.com/css3-button-maker/

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Browser Sizes and Buttons

If you have ever worked with CSS before, you would already know the basic selectors that are available. But there are many more that you may not be aware of as yet.

Here are a few that may spike your interest.

An ADJACENT SELECTOR

ul + p { color: #cccccc; }

This will only apply to the selector that is preceded by the former. In this example only a paragraph that is preceded by a ‘ul’ will show a color using #cccccc

A SIBLING COMBINATOR

ul ~ p { color: #cccccc; }

Whereas the adjacent selector above only applies to the immediate preceding selector, this selector combination applies to any that follow the first selector.

An ATTRIBUTES SELECTOR

a[title] { color: #cccccc; }

The attributes selector can be a very handy addition to your CSS development, as it will only apply to the attribute given, as in this example, only those anchors with a title applied.

The HREF SELECTOR

a[href="http://freshlypressed.net] { color: #ffffff; }

In addition to the attributes selector, the href selector allows for href’s to be individuallly styled. The styling will only apply to this particular link and will not affect any others.

Adding a CARAT SYMBOL to style external links

a[href^="http"] { background: #ffffff url(external-icon.png) no-repeat; padding:5px; }

This is great. in this example, only external links are styled.

These are just a few examples of how the new selectors operate. For a more much more detailed overview and more examples, take a look at the article at http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... The new selectors

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Doctypes that work

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Doctypes that work

This article is copyright © 2012 

Most times when I have created a design, I use the standard format for calling my CSS file, namely

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />

This is placed in my header file before the head tag and it works every single time.

However, like me, you have probably seen the @import call to a CSS file, usually found within another CSS file itself?

So why is this in place and what does it do differently than the standard method outlined above?

Well, after a lot of reading/researching and scratching of the cranium, it seems that the @import file is mainly used to call another CSS file in addition to the one you are working on. Of course, you can have two CSS ‘link’ calls [or more] in your header, and they will work just the same, but there is a slight difference in load times and perhaps more importantly, a difference in ‘how’ they load.

According to individual tests, such as this one over at stevesouders.com, if you opt to use the @import method, you are at risk of slowing down your web page load times.

As the above-mentioned article explains, the two main disadvantages of using @import are:

Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... @import or link – which to use for your CSS

Ever had the problem where you have a Flash element on your site and for some reason it hides your other elements on the page? Not sure? Well, here is an example.

I had a drop down menu that was sitting just above a simple rotating image highlight [driven by Flash]. The trouble was, every time I used the drop down menu, it would hide behind the Flash element below. Certainly not my original plan in the design.

An easy fix though as it happens…

Just had to add the following to the Flash embed.

<param name="wmode" value="transparent">

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Flash – it keeps getting in my way!

Most of you will know these, but just in case, they are handy all the same…

To shorthand your padding and margins, instead of using:

margin-top: 10px;
margin-right: 4px;
margin-bottom: 20px;
margin-left: 16px;

just do the following:

margin: 10px 4px 20px 16px;

As you can see, the properties are clockwise.

———————————————–

And in your use of colours, there is also a shorthand method [which I suspect some of you may NOT know]

If you have a hex color code such as #224488 you can also use #248 to have the same result. This applies to all hex color codes with double digits.

———————————————–

Did you know it is possible to use two classes in the one html element?

Just place a space between the two like this:

<div class="method1 method2">

And the point of doing this you ask? Because you just never know when you may need to apply two classes to an element, such as in this instance:

I want my font in this paragraph to be a certain colour and then, because it is part of this particular topic, I would also like it to be in italic format.

So…

My CSS is

p .color3 { #ccc; } 

but this also applies

p format2 {font-style: italic;}

In this way, the varying formats across my site can be controlled very easily.

———————————————–

I have started to use em’s a lot more in my CSS. EM stands for relative units and I have discovered that the reason we see 62.5% so much in designs for declaring font size of a body, is because it makes it easier when converting px to em. The result? Well, all you have to do now to find your equivalent px to em size is simply divide by 10. For example, 18px is equal to= 1.8em

Of course, the arguments for and against using em or px in your design is still there, but at least this formula solves this little riddle for me, if nothing else.

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... A few quick CSS/HTML facts

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... CUFON your web site

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... CUFON your web site

This article is copyright © 2012 

I am not sure of the exact version number as to when the post revisions and autosave feature was applied to WordPress, but it was some time ago now. I have to say from the outset, that it is not one of my favourite features as it seems to get in the way more than anything. Having said that though, there was one particular occasion where I had not disabled this feature on a site and I was extremely relieved to find that my lost posts, were not actually lost at all.

So really, I guess you need to decide for yourself as to whether or not you need them in place.

Here are a few of the options available in regards to disabling them. [ Add the following codes to your wp-config file. ]

Disable Post Revisions completely…

define('WP_POST_REVISIONS', false);

Limit the amount of Post revisions… [Change the number to your preference]

define('WP_POST_REVISIONS', 3);

Disable Autosave [You need to open the wp-settings.php file]

Locate this code:

if ( !defined( ‘AUTOSAVE_INTERVAL’ ) )
 define( ‘AUTOSAVE_INTERVAL’, 60 );

and change the 60, which applies 60 seconds between saves, to something like 1800, which will mean the saves only happen every 30 minutes

if ( !defined( ‘AUTOSAVE_INTERVAL’ ) )
 define( ‘AUTOSAVE_INTERVAL’, 1800 );

Always remember to save the files when you complete adjusting the codes.

This article is copyright © 2012 

Freshly Pressed - Web hosting with an emphasis on SUPPORT. Now there's a novel idea... Post Revisions and Autosave