In his CSS3 Anarchist’s Cookbook presentation at An Event Apart in Boston, MA 2011 Eric Meyer showcased how CSS rules can be used to drastically alter the experience of a Web site. Here are my notes from his talk:
- We have much more power in CSS now but that means it’s easier to cause big changes that may lead to unintended consequences.
- Here’s some ways you can drastically alter the experience of a Web site using CSS rules.
- FireFox can take an entire copy of an element and repeat it as a background element
- background-image:-moz-element(#input) !important; (make element tiled background in gecko).
- White space in source code can be made visible by applying {white-space: pre-wrap;} to the body of an HTML page
- :hover {opacity: 0.5;} this will apply to all the elements under a mouse so it triggers multiple opacity changes.
- :not(:hover) { opacity: .5;} reverses this effect and displays only what is being hovered over.
- :not allows you to select items in interesting ways. Can double it up like :not(:hover):not(p)
- *:not(p) –allows you to select any element that is not a paragraph. But you can only have one simple selector in a not.
- background-image:-moz-element(#input) !important; (make element tiled background in gecko).
- input:not([type=”checkbox”]):not([type=”radio”]) will select all input types that are not checkboxes and radio buttons.
- What happens when you set link opacity to 0 and hidden to none? Strange results.
- Your immediate intuitive assumption of what child/parent selectors do is usually not what they do. They are really handy but you have to remember where they apply.
- For privacy reasons, browsers ignore many visited styles. You can only change 4-5 properties of links that are visited in order to protect people from having others see what sites they visited.
- Zeros are not universally unit-less at the moment. Length units don’t need units but you cannot reliably use unit-less values for time. For timing the units on 0 matter. Firefox ignores unit-less time units.
- Safari has not implemented what happens when you transform inline elements as it’s not clear yet what they should do. Firefox has implemented their idea of what should happen. This might led to inconsistencies later when the working group defines what needs to happen for inline transforms.
- If you are doing transforms and absolute positioning, be careful. Transforming creates a containing block and a z-index stack. This could lead to elements being repositioned in ways you did not expect.
- Transitions can’t be auto-triggered without an action like hover.
- When you transform, you establish a positioning context so anything with an absolute position repositions itself.
- Firefox keeps polling to see if something is still hovered over and Safari does not once a transition gets going.
- If you want to see who is using new HTML5 elements on the Web, set up a user stylesheet that highlights these elements and surf around.