Meet the Pseudo Class Selectors. Pseudo class selectors are CSS selectors with a colon preceding them.
You are probably very familiar with a few of them. Like hover: a:hover { } They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2... it depends on each particular one. Link-related pseudo class selectors :link - Perhaps the most confusion-causing link-related pseudo selector. :visited - Selects links that have already been visited by the current browser. :hover - When the mouse cursor rolls over a link, that link is in it's hover state and this will select it.
:active - Selects the link while it is being activated (being clicked on or otherwise activated). There is a fun technique to remember all the link pseduo class selectors. Input & link related pseudo class selectors :focus - Defining hover styles for links is great, but it doesn't help out those who used keyboard navigation to get to the link. :enabled - Selects inputs that are in the default state of enabled and ready to be used. CSS reference - CSS.
When to base64 encode images (and when not to) Introduction Ever since Steve Souders started evangelizing web performance, it’s been pounded into our heads that extra HTTP requests add a lot of additional overhead, and that we should combine them if possible to dramatically decrease the load time of our web pages.
The practical implication of this has been to combine our JavaScript and CSS files, which is relatively easy and straightforward, but the harder question has been what to do with images. Sprites Image sprites are a concept taken from video games: the idea is to cram a ton of image assets into one file, and rearrange a “viewport” of sorts to view only specific pieces of that file at a time. Sprite Cow - Generate CSS for sprite sheets.
Clagnut/sandbox. 1.
A very wide image contained in a paragraph with no styles applied Dunstan kindly lent me this charming image. Pellentesque in felis quis tortor consectetuer condimentum. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. 2. 3. 8. 4. CSS Tools: Reset CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. Normalize.css: Make browsers render all elements more consistently. CSS Tools: Reset CSS. Box model. Contents The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. 8.1 Box dimensions Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding border , and margin areas; the size of each area is specified by properties defined below.
The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.). The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges: content edge or inner edge The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. Content box padding edge The padding edge surrounds the box padding. Understanding CSS z-index - Web developer guide.
Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping.
There is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content. HTML5 Boilerplate: The web's most popular front-end template. Don’t use ID selectors in CSS. Posted on: July 28, 2010 / Lately I have been testing out performance among css styles and I found that some of my very smart friends, started asking,”why aren’t you testing using IDs for the unique sections of the page?”.
This wasn’t a hard answer: The element is not re-usable on that page.This is the begining of a downward sprial into specificityUsually, IDs refer to something very specific, and abstracting would be toughAny performance gains picked up by using id, is negated by adding any other selector to the left fo that id Lets delve into each of these issues at more length. Taming Advanced CSS Selectors. Advertisement Meet SmashingConf San Francisco 2017, featuring front-end ingredients, UX recipes and design beats from the hidden corners of the web.
Only practical, real-life techniques that you can learn from.