HTML/CSS

From Things and Stuff Wiki
Revision as of 00:40, 19 August 2012 by Milk (talk | contribs) (→‎Transitions)
Jump to navigation Jump to search


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

Standards

HTML

CSS

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

Validation

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
  • Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language (Selenium IDE). It also provides a test domain-specific language (Selenese) to write tests in a number of popular programming languages, including C#, Java, Groovy, Perl, PHP, Python and Ruby. The tests can then be run against most modern web browsers.
  • iMacros is an extension for the Mozilla Firefox, Google Chrome, and Internet Explorer web browsers which adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. iMacros was developed by iOpus. First released in 2001, iMacros was the first macro recorder tool specifically designed and optimized for web browsers and form filling.

Favicon

Structure and elements

  • sections;
    • body, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address
  • grouping;
    • p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div
  • text level;
    • a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub/sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr

Lists

From Wikipedia; 

list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEX
///8AUow5QSOjAAAAAXRSTlMAQObYZgAAABNJREFUCB1jYEABBQw/wLCAgQEAGpIDyT0IVcsAAAAASUVORK5CYII=);

Forms and buttons

Resets, normalize, etc.

Different browsers have different defaults.

Polyfills, shim/shivs

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

  • Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.]

Units

rem

v*

100vw == window.width

examples

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]

http://news.ycombinator.com/item?id=4388649

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
position: fixed

Tips

Text

Background

Gradients

Sprites

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

Data

Animations

Transitions

Transforms

  • CSS3Warp is a small (<8kb minified unzipped) javascript library for warping any HTML text around an arbitrary path. Text will look as if it were created with Illustrator's attach-to-path tool. Anyway it is pure HTML text that can be styled with CSS, copied and crawled. csswarp works standalone and does not rely on jQuery or another library (a jQuery plugin is in the works though). csswarp.js offers an extensive number of settings to adjust text warping. Right now it will work in every modern browser that supports css3 transforms. Support for IE versions <9 is planned for a future release.

Canvas

Microdata

Header, footer

Outline

Full screen

Misc

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]

Markup

Future

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