Links
- Tools
- Best Practices
- Side Effects in CSS
- A New Front-End Methodology series.
- 6. BEM by Yandex (recommended)
- BEM stands for “Block”, “Element”, “Modifier”.
- 5. Gridpak: Responsive Grid generator—Erskine Design’s responsive grid generator
- 2. Foundation: Responsive Grid, a responsive framework
- 6. BEM by Yandex (recommended)
- Reference
- Reference | MDN
- CSS Values and Units Module Level 3
- Quick Docs
- Conditional
- Key Concepts
- Determining the dimensions of elements
- CSS Values and Units Module: Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’
- Escaping characters with backslash
- css-tricks.com: CSS demos / downloads
- Pseudo Elements
- Layout
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
- Handbook
- Tons of links there.
- News (css beauty)
- Styling Lists
- pure CSS menus
- Articles
- Awesome CSS3 Features That You Can Finally Start Using
- CSS: Using every declaration just once
- Learning to Love the Boring Bits of CSS
- New pseudo-classes
- Load a subset of characters
- Root-relative lengths
- Viewport-relative lengths
- Detailed Positioning
- Performance
- Sprites
- Columns
- Icon fonts
- Custom Filters
- Viewport
<meta name="viewport" content="width=device-width, initial-scale=1>
- Configuring the Viewport
- Don’t Forget the Viewport Meta Tag
- A pixel is not a pixel
- Canvas
- Libraries
- normalize.css
- Better than CSS resets.
- yui reset-min.css – http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css
- yui 2: grids css
- blueprint-css
- normalize.css
- iOS
- To Organize
- Custom Events are Pretty Cool
- Anything Slider
- Libraries
- gridstylesheets.org: CSS polyfills from the future
- GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
- gridstylesheets.org: CSS polyfills from the future
Editors
-
Css Editor
Topics
-
display
- quirksmode: display property
- Supported values
- none
- inline
- block
- inline-block
- list-item
- run-in
-
line-height
-
whitespace and wrapping
white-space: nowrap;
-
Mouse cursor
Ref: SO: Make mouse pointer a hand when hover over
a { cursor: pointer; } # If you also want to support IE 5.0 and IE 5.5, use # this. a { cursor: pointer; cursor: hand; }
-
Inheriting properties
Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited.
In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.
body { color: black !important; background: white !important; } * { color: inherit !important; background: transparent !important; }
-
The @import rule
The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.
Example(s):
The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):
@import "mystyle.css"; @import url("mystyle.css");
So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.
Example(s):
The following rules illustrate how @import rules can be made media-dependent:
@import url("fineprint.css") print; @import url("bluish.css") projection, tv;
-
Outlines
eg.
button { outline : thick solid}
Scripts may be used to dynamically change the width of the outline, without provoking a reflow.
Outlines and Focus: Use dynamic outlines in conjunction with the :focus pseudo-class. To draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:
:focus { outline: thick solid black } :active { outline: thick solid red }
-
Simple Clearing of Floats
- If a float, "inner", inside a div, "outer", is taller/longer than "outer", then "outer" doesn't seem to realize this properly. The solution is to mark outer with style="overflow:auto" to _remind _it. This surprisingly simple solution appears to work in all modern browsers including IE 5.5+. If you have issues with scrollbars that you'd like to hie, then overflow:hidden will do the trick.