HTML/CSS

From Things and Stuff Wiki
Revision as of 18:21, 16 July 2012 by Milk (talk | contribs)
Jump to navigation Jump to search


to merge from bits of design. aaand break out. and generally sort.

Specs

Docs, guides, etc.

Basics

  • A Beginner’s Guide to HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
  • Dive Into HTML5 by Mark Pilgrim

Resources

Articles

Tools

See also Browsers

Bookmarklets

Overlay

div { outline:1px solid red; }

javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul'];var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();

Testing

  • Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.
    • Helps by showing errors

Testing

Browsers available:

  • Chromium 22 (Dev)
  • Google Chrome 20
  • Firefox 13
  • Firefox 16 (Nightly)
  • Opera 12

Plus Windows; Firefox, Chrome, IE.

To check

Resets, normalize, etc.

Different browsers have different defaults.

Properties

Selectors

h1 + h2
  <h1></h1><h2></h2>

h1 > h2
  <h1><h2></h2></h1>
root - Selects the element that is at the root of the document. Almost certainly will select the <html> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.
first-child - Selects the first element of its type within a parent.
last-child - Selects the last element of its type within a parent.
nth-child(N) - Selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. Covered in more detail here with a tester tool.
nth-of-type(N) - Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won't work there, you'd use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating -dt- and -dd- elements.
first-of-type - Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.
last-of-type - Same as above, only would select the last image inside the first div and the last image inside the second div.
nth-last-of-type(N) - Works like :nth-of-type, but it counts up from the bottom instead of the top.
nth-last-child(N) - Works like :nth-child, but it counts up from the bottom instead of the top.
only-of-type - Selects only if the element is the only one of its kind within the current parent.

Specificity

p has a specificity of 1 (1 HTML)
div p has a specificity of 2 (2 HTML; 1+1)
.sith has a specificity of 10 (1 class)
div p.sith has a specificity of 12 (2 HTML and a class; 1+1+10)
#sith has a specificity of 100 (1 id)
body #darkside .sith p has a specificity of 112 (HTML, id, class, HTML; 1+100+10+1)

[1] [2] ([3]),[4]

Positioning

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally
display: inline-block
display: table-cell - vertical align method [5]
  http://www.quirksmode.org/css/display.html

float - floats element next to containing box or other floated element

position: absolute - out of flow

Tips

Responsive

Basics

Viewport

Examples

Media Types/Queries

@media <media type (expressions)> {
  /* media-specific rules */
}

 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

or 

<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />

Templates

Mobile first responsive theming is the way to go these days.

From the Responsive Design Testing bookmarklet;

  • 240 x 320 (mobile)
  • 320 x 480 (mobile)
  • 480 x 640 (small tablet)
  • 768 x 1024 (tablet - portrait)
  • 1024 x 768 (tablet - landscape)
  • 1200 x 800 (desktop)

320andup

@media only screen and (min-width: 480px) {
 /* 480 =================================================== */
}
@media only screen and (min-width: 600px) {
 /* 600 =================================================== */
}
@media only screen and (min-width: 768px) {
 /* 768 =================================================== */
}
@media only screen and (min-width: 992px) {
 /* 992 =================================================== */
}
@media only screen and (min-width: 1382px) {
 /* 1382 =================================================== */
 body {
   max-width: 1440px;
 }
}

Other

Navigation

Shim

Articles

Video

Grid

Frameworks

960.gs

blueprint

Generators

Overlays

Vertical rhythm

Web

JS

Bookmarklets

CSS

Sass

Accessibility

See also Design

Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [10]

Typography

body
article
h1
h2
h3
p, ul
small, aside

Kerning

Font symbols

Background

Outline

Data

Animations & transitions

Sprites

Header, footer

Menus

Gradients

Full screen

Misc

Preprocess

See also Sass

JS Shims

For older browsers.

Frameworks

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=HTML/CSS&oldid=2086"