CSS3 In-Depth

Estelle gives a brief introduction to the course and a number of resources. Exercise files are incorporated within the slide deck.

Definition and explanation of both basic and relational selectors Demonstration of basic and relational selectors Estelle shows a brief list of the additional selectors that she will be covering and provides a reference for determining browser support

Attribute selectors can be used to style elements based on the existence or value of an attribute. Demonstration of attribute selectors

UI pseudo classes are based on the current state or structure of the UI. For example, a style may be applied if an item is enabled, disabled or checked. HTML5 web forms also introduce a number of additional pseudo-classes that accompany the new input types. Demonstration of UI selectors and pseudo-classes

UI pseudo-classes can also target elements based on their relationship to other elements in the DOM. The first step is to understand the difference between child and type. Nth pseudo-classes target elements based on arguments passed to the selector.

Estelle demonstrates some techniques using structural pseudo classes to create different column widths and design a US Flag

The negation pseudo-class can add exclusion to a CSS rule. The empty pseudo-class, used more rarely, will match any element that doesn’t contain any content or whose content is only an HTML comment.

Estelle finishes up covering a few additional pseudo-classes and demonstrates some uses cases for each one. The additional pseudo elements include :lang, :target, and :root.

While pseudo-classes classes select elements that already exist, pseudo-elements create “faux” elements that you can style. Pseudo elements are often indicated by double-colon notation however for IE support, single colons should be used. It’s a good idea to use Selectivizr along with other JavaScript libraries for backward compatibility.

Element selectors carry the least “weight” when it comes to specificity. From there, adding classes or pseudo-classes increase the weight of a selector. IDs carry the most weight in specificity. Estelle walks through her “Speci-FISH-ity” chart describing how these rules relate to specificity. Specificity for the newer selectors like the global selector, combinatory, and negation selector are not as obvious. Remember that specificity is not inheritance.

Generated content is content created with CSS that can be placed before or after the content of an element. The difference is the generated content is not part of the DOM. Essentially you have two stylable elements (<before> and <after>) for every non-empty element. Within the content property, you can put any text, unicode character, attribute, or counter.

Incorporating images and counters in the generated content can be useful. Estelle demonstrates a few of these techniques and also describes a use-case for sprite sheets. Counters allow generated content rules to “count” elements in the DOM and display a numeric value. While the attr(X) syntax for generated content is not widely supported yet, in the future it will add some extremely powerful techniques since it can pull from any attribute value within and element.

Estelle demonstrates some common use-cases for generated content. These include adding iconography and tool-tip hover effects based on href values.

There are many more generated content example on the CSS-Tricks.com website. Some incorporate shapes created with CSS. Others add complex graphical effects or interactive content.

Estelle codes a more complex generated content hover interaction. While answering an audience question, Estelle demonstrates how to use the debugger with hover pseudo-classes

Print and screen media queries have been used for many years in web development. With the multi-device landscape, media queries around screen width, height, and orientation are more widely used. Media queries can also be written based on device capabilities.

The viewport of a webpage has traditionally been set in an HTML meta element, however this is not appropriate for presentation. CSS adds a “@viewport” declaration that allows the viewport to be set via CSS.

Most modern browser, both mobile and desktop, have tools for debugging content in-browser. Some browser debuggers and better than others.

With mobile devices, it’s helpful to use a remote debugger to inspect the DOM of the content as it’s rendered in the device’s browser. Using Weinre, remote debugging can be done very easily.

There are a variety of color formats in CSS include hexadecimal, RGB, RGBA, HSA, and HSLA. The “A” in RGBA and HSLA stands for “alpha” or transparency. HSL stands for hue, saturation, and luminosity. It’s a more intuitive way to select and alter colors as opposed to hexadecimal.

Reducing an object’s opacity will make both the object and its children transparent. It’s often better to use a background color with transparency so the children of the object aren’t affected. Using RGBA or HSLA is often best for shadows. The appearance property in CSS allows developers to change the look of an element. Currently, the appearance property requires vendor prefixes.

The font-face rule declares a font family that can be used within a CSS document. It’s important to know what font types are compatible in different browsers.

Font licensing can be an issue with web fonts. Also, font files are large and can take a while to download. Using a font service like Google Fonts will help with both of these issues. Font Squirrel font-face generator will generate the font files needed for a webpage and optimize the files for the smallest download size

The key to a good-looking shadow is transparency. Don’t use opaque shadows. The four settings for a shadow are left, top, blur and color. Create better looking text-shadows by including multiple shadows. Multiple shadows can be added by separating each text shadow with a comma. Box shadows are similar in syntax to text-shadows, however, they add two additional values: inset and spread. Estelle experiments with generated content and box-shadow. Text stroke in CSS allows you to outline text. However, it currently only works in webkit and can be re-created using text-shadow.

Previously, developers often used the background shortcut in css to declare their backgrounds. Estelle describes why that’s not a best practice any more. There are many additional background-image values added in CSS3 including gradients, SVG, and sprites.

Repeated backgrounds are controlled with the background-repeat property. This enables vertical/horizontal tiling or allows developers to turn off repeating. Using background-attachment allows images to be fixed to the background of an element or its parent. If you use percentages to position your background images, the browser uses a ratio for positioning. With the introduction of CSS3, some browsers now support background positioning relative to any corner.

The background-clip property in CSS indicates which part of the background is showing. Background origin indicates where you the background image begins. When considering hiDPI images, the background-size property determines how backgrounds will grow or shrink.

When declaring border properties, they follow the top-right-bottom-left shorthand rules. Unlike backgrounds, it’s acceptable to use the border shorthand syntax. Estelle experiments with different border-radius values.

Border images are use a 9-slice scaling technique where the images is “sliced” into nine regions and the corners maintain their aspect ratio while the other regions shrink/grow.

Gradients can theoretically be used anywhere an image can be used. There are four gradient types. Currently there are three different syntaxes to support. The first is the original Webkit syntax.

The prefixed, older linear gradient syntax is another version of the gradient syntax that is still supported in web browsers. This syntax requires a vendor prefix

The final linear gradient syntax is the W3C standard syntax which enables a number of additional techniques like hard-stops, color-stops and endpoints.

Estelle demonstrates a number of useful techniques for using radial gradients in CSS.

In CSS, there are a number of two-dimensional transform functions that will move, scale, rotate and skew elements.

Estelle begins experimenting with different 2d transformations and explains various customizations like transform-origin The main difference between 2d and 3d transformations is that 3d transformations are rendered by the GPU, not the CPU.

Transitions can be as simple as changing the color of a link on hover. Adding a duration makes those transitions animate. Any property with an intermediate value can be transitioned.

Transitions enable web developers to produces effects with CSS that would typically require a lot of JavaScript code to create.

CSS animations can have single or infinite iterations and have more granular control than transitions. They also have a more robust API for hooking into JavaScript. Animations are defined with the @keyframe property.

Animations are attached to elements using the animation-name property as well as animation-duration property. In addition, the animation-timing-function can be applied to change the way the animation plays.

While hard to read, the animation shorthand syntax can make your code less verbose. There are also other properties like animation-fill-mode and animation-delay that give you a more granular control of your animations.

Estelle quickly covers a number of additional CSS features including multi-column content, box sizing, CSS regions, and CSS exclusions.

Estelle continues here brief coverage of additional CSS features that currently are not widely supported but worth noting. They include the new flexible box model, grid layouts, CSS shaders, cursors, text wrapping, the calc method, and rem units

Estelle concludes with a few additional resources and a brief quiz to test your recognition of CSS properties.