HTML/CSS

From Things and Stuff Wiki
Jump to navigation Jump to search


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

Standards

HTML

CSS

Working Drafts

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.

Resources

Articles

Tools

See also Browsers

Authoring

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

Tools

  • The Screening tool lets you automate testing of web-based applications. You can use it to; Create test scripts by recording actions that you perform on an application, Run automated tests applications, Script tests by using the Screening tool’s API

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)

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

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 [6]
  http://www.quirksmode.org/css/display.html

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

position: absolute - out of flow

Tips

Background

Forms and buttons

http://nicolasgallagher.com/lab/css3-github-buttons/

Animations

Transitions

Transforms

Sprites

ls
  1.png  2.gif  dot.png  phoney.gif  tw.gif
convert *png *gif -append result/result-sprite.png

Data

Header, footer

Outline

Menus

Gradients

Full screen

Misc

JS Shims

For fixing the lack of HTML5/CSS3 support in older browsers.

Frameworks

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". [9]

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