Category: CSS

Keep HTML and CSS Markup Flexible with CSS Selectors

With CSS, we can completely transform the look of a website without changing its source code and markup. The key of that process is CSS selectors. But despite this, CSS selectors are one of the more neglected parts of the specification and CSS selectors are still not used to their full potential. You may sometimes spend too much time trying to solve a problem that you could more easily solve by using CSS selectors.
Today, I’m listing the list of CSS Selectors you Must Memorize if your want to keep your code (include HTML markup) and your style sheets flexible.
Note: I am not going to explain the basics of how CSS selectors in general work here.
Continue reading

IE Market Shares - January 2014

How to help IE 8, 7, 6 more compatible with HTML5, CSS3 & MediaQueries

Since January 2014, Internet Explorer 11 availability with Windows 8.1, Firefox 26 and Google Chrome 32 has released. Have you known? IE8 is most used as web browser in IE Market Shares. As a web designer/developer, it’s always our goal to give our website visitors better experience on viewing our site. That’s why I recommend you take care of your website layouts (WordPress themes, Joomla Templates …) with old browsers, especialy for earlier versions of IE.

IE Market Shares - January 2014
IE Market Shares – January 2014. Image Copyright by The Next Web.

The following will allow your sites to quickly and almost magically work better in Microsoft’s flagship browser!

Browsers Detection

Many people don’t know this, but WordPress provides several global variables that we can use to do browser detection.. The variables WordPress provides are as follows: $is_lynx, $is_gecko, $is_IE, $is_winIE, $is_macIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone.
If you’re not using WordPress, here is little PHP magic to detect the User Agent:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) {
	// do something
}

We can use this result to tell the user’s browsers how to rendering your website layouts which has built with HTML5 and CSS3.

Include third-party scripts to your themes

There are 3 really helpful scripts that add better compatibility for “modern” things such as responsive design, CSS pseudo-classes and attribute selectors as well as HTML5 tags.

htmlshiv.js – HTML5 Support

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.

HTML5 Shiv Usage

Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets.

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/html5shiv.js"></script>
<![endif]-->

HTML5 Shiv works as a simple drop-in solution. In most cases there is no need to configure HTML5 Shiv or use methods provided by HTML5 Shiv.

selectivizr.js – CSS pseudo-class support

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your page’s <head> and selectivizr will do the rest.

Selectivizr Usage

To use the library, you’ll need to include one of the supported libraries:

  • jQuery (1.3+)
  • Dojo (1.5.0+)
  • Prototype (1.6.1+)
  • Yahoo UI Library (2.8.0+)
  • DOMAssistant (2.8.0+)
  • MooTools (1.3+)
  • NWMatcher (1.2.3+)

Then add the following conditional comment AFTER your stylesheets:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> 

An absolute must for your modern projects. Only loaded for old IE’s.

respond.js – Mediaquery support

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop. @media screen and (min-width: 480px){ ...styles for 480px and up go here }
  2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media’d content)
  3. Crack open Internet Explorer and pump fists in delight

This isn’t the only CSS3 Media Query polyfill script out there; if you’re looking for more robust CSS3 Media Query support, you might check out CSS3 MediaQuery.js

Conditional Comments

CSS and JavaScript issues within each version of IE present us with layout and functionality issues. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

This snippet doesn’t require or wait on JavaScript but it looks so ugliest as you’ve ever seen. While we all dislike Internet Explorer’s bugs, their conditional comment syntax provides us a perfect method for fixing them quickly because ugly or not, the fact remains that this code workers exactly as intended.

Conditional Comments Syntax Table

Item Example Comment
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Use Vendor Prefixes for specified browser

Using vendor prefixes will save you a lot of time without worrying if the browser supports your CSS.

Check out the following list of vendor prefixes.

  1. Safari and Chrome -webkit-
  2. Firefox -moz-
  3. Opera -o-
  4. Internet Explorer -ms-

Conclusion

And there we go. Somewhat better browser support and less headache if you want to attempt to support old version of Internet Explorer.

Understanding Font sizing in CSS

Understanding Font sizing in CSS: em – px – pt – percent – rem

In CSS3, you’re found sixteen (Yes, sixteen!) different units by which you can measure the size of text with font-size attribute. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). Some units are very popular but there are rare units or don’t use in website development. In this topic, I’m telling you about the summary of these attributes which is best suited for your website.
Continue reading

Make your own Wordpress Drop-Down menu

Make your own WordPress Drop-Down menu with CSS and jQuery

A drop down menu is often your best means of keeping the navigation simple and uncluttered, that can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. There are a few plugins that you can use to make this, but in this post, I’ll show you how to make your own WordPress Drop-Down menu with CSS and jQuery and WordPress’s standard wp_list_pages, wp_nav_menu, wp_list_categories

Make your own WordPress Drop-Down menu
Make your own WordPress Drop-Down menu

The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to make sure cross-browser compatibility.

To get started with this tutorial, you’ll need to have a WordPress website up and running and a willingness to alter your theme files. Once that’s squared away you’re ready to rock!

Continue reading

Tutorial9 Sprites

CSS Sprites – Techniques, Tutorials And Tools | The Good and The Bad

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two-dimensional images themselves that were integrated into a scene.

Fire Emblem Sprites
Fire Emblem Sprites

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers.
Apply Video games images render techniques above to Web development then we have CSS Sprites. In fact, CSS Sprites are not new, in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load.

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math.

Continue reading

Beautiful and Simple CSS Button Styling

You feel the buttons are not beautiful in form and display on different browsers. CSS buttons are much more efficient than image-based buttons because they’re entirely text-based. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you.

Below, you will find the CSS Tutorials and Techniques to make CSS Button Styling
Continue reading

Powerful and Userful CSS Tools to saving your time – Part III

Last week, I’ve lost all content in this topic since I’ve upgraded wordpress to newest version: v2.8.3. The problem happened since wordpress v2.8, ’cause the error to save the content in the visual mode then it disappear after done. Therefore the publication of this article were prolonged than scheduled.

Most would probably agree that CSS is one of the most important parts of modern standards based web design. CSS is really simple and extremely powerful if you know how to master it… if your new to CSS getting started can be quite hard. I hope this article will help you all to get more out of CSS in your web projects.

Continue reading

Powerful and Userful CSS Tools to saving your time – Part II

CSS is the thing that makes websites beautiful, without CSS everything would look sad and unattractive. This is why I have collected Powerful and Userful CSS Tools to reduce your work time.
As you knew in the earlier topic, that problem occur when I make too many items list. Now you will be read the part 2 of full article about CSS Tools.
Continue reading