The ability to embed fonts on a Web page has been a dream of many designers for years. @font-face is the CSS declaration that allows us to do this, but it is not widely supported by Web browsers, especially Internet Explorer. When CSS 2 first came out, the W3C actually recommended support for@font-face, but it was soon deprecated due to lack of support by CSS 2.1.

Now the demand has returned with a stronger push. Even though some current browsers don’t support it and older browser versions are still being used, most modern browsers do now support@font-face. If it is one day fully implemented, all we would have to do is this: Read more…

• No Related Post

CSS was originally meant for styling after all, right? Let’s step back from the programming-related concepts, and turn again to the design element of CSS. Aside from functionality in coding, some of the ideas floating around relate to functionality in design. Let’s look at a few below, some of which already have solutions.

Advanced Hyphenation Techniques

With increasing attention paid to typography in the last few years, hyphenation has become a priority for many people. Well-designed websites hyphenate the text in areas where it is important to the layout so that the text does not have to be constantly altered. This improves alignment and better organizes the overall design. Read more…

• No Related Post

A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.

To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.

When many elements from a certain class or ID share the same properties, things can get a bit repetitious:

Smarter syntax would tighten things up, saving both time and space in the style sheet:

As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good: Read more…

• No Related Post

Conditional options in CSS have a variety of benefits but can also bring the same deficiencies as CSS variables in that they alter the state of CSS as it is. Many of the cons have to do with efficiency, confusion and, in some cases, added HTTP requests (because it deals with a type of server-side programming language).

Nonetheless, let’s look into more of the benefits of conditional CSS statements. Just keep in mind the cons that come with them, and always be thinking of new ideas to overcome them. So far, the tools and solutions that give developers and designers conditional statements in CSS have come to be relatively well accepted. This is because CSS conditionals seem to solve bigger problems in CSS, and the lack of efficiency seems minor by comparison.

Let’s not forget the original CSS conditional. The problem with the traditional CSS conditional for IE, however, is that it has no else or else if. Although the use may be limited, an if/else statement for CSS could allow designers and developers to specify styles for other types of conditions: browsers, for example.

One popular tool for calling styles according to browser type is Conditional-CSS.com. While many other solutions are out there for conditionals as well as this particular problem, this tool can do most of the work automatically, with minimal confusion. Read more…

• No Related Post

Developers can easily see the benefit of using variables to code their Web apps, so seeing the benefit of variables in CSS is just as easy. Are they needed though? Before we answer a tough question like this, let’s go over what they are and how both designers and developers can use them.

Similar to a programming language, CSS variables can be used to define style sheet-wide values with one descriptive word. This one word can then be used repeatedly throughout the style sheet to use the value assigned to it. The point of variables is to save time and, in most cases, create more efficient code. An example of the idea in practice is below. Read more…

• No Related Post

We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group:

td, th {
  ? declarations
}

We can think of the comma as a logical OR operator, but it’s important to remember that each selector in a group is autonomous. A common beginner’s mistake is to write groups like this: Read more…

• No Related Post

[href] {
  ? declarations
}

a[href] {
  ? declarations
}

• No Related Post

Description

An ID selector matches an element that has a specific id attribute value. Since idattributes must have unique values, an ID selector can never match more than one element in a document.

#navigation {
  ? declarations
}