Muthuswamy

Today I faced a problem with my clients website when I used the regular expression technique that I explained in my post here. The problem raised because his website is in Swedish so the usual character pattern that I used to match was not working.

The pattern matching string used before was: <a [a-zA-Z0-9 /.?_=:"-]*>

But his website used characters like Õ, Ä, Û, é, and so on… To solve this problem I introduced another set of hex based pattern matching rule [\xC0-\xFF] This rule actually includes all the special alphabets (uppercase and lowercase).

So the new pattern matching rule for non-english websites will be:
<a [a-zA-Z\xC0-\xFF0-9 /.?_=:"-]*>

The tools that helped me today are:

• Webmonkey Special Characters Reference – I was able to get the list of special characters that I need to concentrate and their decimal values.
• My Scientific Calculator – To convert the decimal values to HEX values.
• Free RegEx Testing Tool – A multi-platform free adobe air regular expression evaluation tool that helped me to test my ideas.

This is all for today. Will post my experiences like these often. If you have any comments, please let me know through the comments section below so I can improve this further.

If you are one among the one who hate IE6 being still alive, you will understand the problem that I am trying to solve here. A sliding window technique is a CSS approach to make the menu items with unusual styling(rounded corners, bite corners, etc,.). This is attained by using 2 images. To know more about CSS sliding window menus with examples visit Dynamic Drive.

This technique requires two levels of markup:
<li><a><span>Content here</span></a></li>

Because of this, you need to add and extra <span></span> wrap for your menu content or you can use the <li> and <a> as pairs, but the problem raises in IE6 as IE6 does not support CSS hover for <li>. Adding an extra span can be easy for a static site, but in wordpress the pages or categories that are usually used as page items are generated by built-in functions that do no provide options to add the extra <span> tag for versions older than wordpress 2.7. Sadly there are still some people who are using older versions of wordpress, so make your theme suit them all by using this technique.

Here is a simple PHP code that can save you from this problem:
<?php<br /> $mypagelist = wp_list_pages(‘title_li=&depth=-1&echo=0′ );<br /> $mypagelist = eregi_replace(‘(<a [a-zA-Z0-9 /.?_=:"-]*>)’,'\1<span>’,$mypagelist);<br /> $mypagelist = eregi_replace(‘(</a>)’,'</span>\1′,$mypagelist);<br /> echo $mypagelist;<br /> ?>

This code will get the page list from the “wp_list_pages” function and adds the wrapping<span> and </span> tags and prints then on the page. You can use the same technique for functions like:

• wp_list_pages
• wp_list_categories
• wp_list_bookmarks
• wp_list_authors

Please leave your comments and suggestions related to this topic in the comments section.

If you have come here directly, I recommend you to read the first part of this tutorial here.

Font:
Font property has a number of sub properties like:

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: inherit
• line-height: normal
• font-family: inherit

You can give values for all these properties just within a single property named “font”. A simple example of it is given here:

span{font:italic bold 16px Arial, Helvetica, sans-serif;}
Here we use implicit specifications of font properties as given in the list above.

Border:
You may have used borders many time, but from now on you are going to use it in short version. Let’s see the available border properties.

• border-width
• border-style
• border-color

There are no default values for border properties, so you have to specify every property to make the border visible. We can see a sample code here:

div{border:#000 2px solid;}
This will create a continuous black border of 2px width. If you wish to use different widths for youe borders you can use the following code:

div{border:#000 2px 4px 3px 4px solid;}

Here we use a shorthand version of specifying widths. We use a clockwise representation of border widths.

Here the “Top border” width is specified first, then “Right border” width, “Bottom border” width followed by “Left border” width. Let’s call this a “CSS Clock” to make it easy to remember.

This type of representation is used everywhere in CSS when it comes to representing properties that has top, right,bottom and left regions.

I am stopping this part right here to give you some break. The third part will be released in next few days.

This is my first post and I want this to be useful to the readers, so I am writing about using shorthand codes in CSS. Before I get deep into CSS shorthands let me answer some of the frequent questions that may pop in your minds.

What is this CSS Shorthand?

Each CSS property has its own name and value. But the technique of grouping similar CSS properties by just setting values to the generalized name. I am sure that you will understand it better at the end of this tutorial.

Why should I use CSS Shorthand?

By using CSS shorthand technique, you actually have the following benefits:

• You reduce the CSS file size which proportionally reduces the load time.
• CSS code will be clean and easy to manage.
• It proves that you are an expert in CSS.

So why are you waiting? Teach me.

Ya, Lets start. I am going to take you through each property which can be minimized. First I will show you the expanded version, then the procedure to minimize it.

Background:
The list of properties available for background and their default values:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-position: scroll
• background-attachment: top left

You don’t have to give each property separately, instead we use a single property “background“. Here is an example:
div{background:#000 url(images/picture.jpg) no-repeat center 50% fixed;}
Here the color, image URL, image repeat, position and attachment properties are described in just one line. Even if you leave out any of the properties, the default values are used. If you notice the code, you can see that I have used hexadecimal(hex) value for color. Usually hex values are 6 digits but here I have used a shortened version. You can shorten the digits if they appear in pairs. For example, #666666 can be written as #666, #44BBAA can be written as #4BA but you cannot shorten color values like #693B45 or #EE4423.

I wish to stop this tutorial right here and request you to get some practice in this topic. The next part of this tutorial will contain techniques to reduce other CSS properties. I will update here once the next part is released. Happy coding.

Update: CSS Shorthand – Simplified (Part 2) published.