HTML/CSS

From Things and Stuff Wiki
Revision as of 22:47, 19 February 2013 by Milk (talk | contribs) (→‎Selectors)
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

Resources

  • W3Techs - World Wide Web Technology Surveys

Articles

Project basics

Favicon

Resets, normalize, etc.

Different browsers have different defaults. You can either reset them to zero, or normalise with cross-browser sensible 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.]

Filters

Structure and elements

Tags

  • 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

Articles

hrm;

Comments

<!-- this is
 a multiline
 comment -->

Lists

From Wikipedia; 

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

Horizontal list; 

#navlist li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

Forms and input

Tab order

Pseudo-elements

q::before { content: "»" }
q::after { content: '«' }

Was just one colon, but CSS3 added another to distinguish from pseudo-classes. 

content: "";
  needed to display

element {
  position: relative;
  background: black; 
}

element:before, element:after {
  content: "";
  position: absolute;
  background: black;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
}

element:before {
  right: 100%; 
}

element:after {
  left: 100%;
}

html, body {
   overflow-x: hidden;
}

To the left; 

element:after {
  display: none;
}

To the right; 

element:before {
  width: 20px;
}

Step it up, step it up, it's alright.

Tables

Not bad for tabular data, but can be annoying to style.

Units

  • 1em - element font size (affected by element nesting depth)
  • 1rem - root element font size
  • 1em = 16px (by default anyway)
  • 1px (css pixel) = 1/96in
  • 1vp = 1% viewport width
  • 1in (inch) = 2.539954cm
  • 1pt (point) = 1/72in
  • 1pc (pica) = 12pt

rem

v*

100vw == window.width

examples

color

The color CSS property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1. Note that, the color value must be a uniform color, eventually not completely opaque, and can't be a <gradient> which is a <image> in CSS. 

color: red;                     // A CSS Level 1 color
color: orange;                  // The only color added in CSS Level 2 (Revision 1)
color: antiquewhite;            // A CSS Level 3 color, sometimes called a SVG or X11 color.
color: #0f0;                    // The color 'lime' defined using the 3-character dash notation.
color: #00ff00                  // The color 'lime' defined using the 6-character dash notation.
color: rgba( 34, 12, 64, 0.3);  // A color defined using of the available functional notations.
color: currentColor;            // The special keyword representing the color's value of its direct ancestor

color: inherit

Selectors

h1 + h2
  



h1 > h2
 direct de


Specificity

* http://www.w3.org/TR/css3-selectors/#specificity

* What the Heck Is CSS Specificity?

* htmldog: Specificity
* CSS: Specificity Wars
** http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
* CSS Specificity: Things You Should Know

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

* !important


Pseudo-classes

* MDN Pseudo-classes

From Pseudo Class Selectors;

: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.

* http://css-tricks.com/how-nth-child-works/
** http://css-tricks.com/examples/nth-child-tester/

: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.

* Attribute selectors

* http://selectivizr.com/

* http://css-tricks.com/css3-tabs/
* http://css-tricks.com/functional-css-tabs-revisited/

* http://codepen.io/RadLikeWhoa/full/cAJEo


Layout

* http://www.w3.org/TR/CSS2/box.html
* http://www.w3.org/TR/css3-box/

* Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough - video


display

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


float

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

* Floats and clearing
* http://colinaarts.com/articles/float-containment/


clear

* http://stackoverflow.com/questions/8554043/what-actually-is-clearfix

* http://perishablepress.com/new-clearfix-hack/


position

 position: absolute - out of flow
 position: fixed

* https://github.com/andreasbovens/understanding-viewport
* http://www.brainjar.com/css/positioning/default.asp


vertival align

* http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [3]
* http://css-tricks.com/what-is-vertical-align/
* http://www.barelyfitz.com/screencast/html-training/css/positioning/


overflow

http://colinaarts.com/articles/the-magic-of-overflow-hidden/


z-index

z-index works only on absolute or relative positioned elements.
* https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
* http://en.wikipedia.org/wiki/Z-index
* http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

via js;
 object.style.zIndex="1"


flexbox

* https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
** http://demo.agektmr.com/flexbox/


box-sizing

* https://developer.mozilla.org/en-US/docs/CSS/box-sizing
* http://docs.webplatform.org/wiki/css/selectors/box-sizing

* http://paulirish.com/2012/box-sizing-border-box-ftw/ [4]
* http://stackoverflow.com/questions/2429819/why-is-the-w3c-box-model-considered-better


Tips

* http://stackoverflow.com/questions/6916079/two-divs-on-the-same-row-and-center-align-both-of-them

* http://css-tricks.com/float-center/
* http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto

css is stoopid


Text

See also Typography

* http://stackoverflow.com/questions/471510/hide-text-using-css
* http://www.sitepoint.com/css3-starwars-scrolling-text/


text-transform

* https://developer.mozilla.org/en-US/docs/CSS/text-transform

 text-transform:  none | capitalize | uppercase | lowercase | full-width 


text-shadow

* https://developer.mozilla.org/en-US/docs/CSS/text-shadow
* http://www.w3.org/Style/Examples/007/text-shadow.en.html
* http://www.wordpressthemeshock.com/css-text-shadow/

* http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/


text-stroke

Webkit only.

* http://www.webkit.org/blog/85/introducing-text-stroke/
* apple safari docs

* http://www.westciv.com/tools/textStroke/ - generator

* strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation.


other

* http://xion.org.pl/2011/12/26/text-ellipsis-with-gradient-fade-in-pure-css/


Properties

* http://www.w3.org/community/webed/wiki/CSS/Properties


border

* https://developer.mozilla.org/en-US/docs/CSS/border
* http://www.css3files.com/border/

 border:  <border-width> || <border-style> || <color>

 element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
 element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
 element { border: solid red }       /* solid, red border of medium thickness */
 element { border: solid blue 10px } /* solid, blue border of 10px thickness */


background

* https://developer.mozilla.org/en/CSS/background
 background: #f00;
 background: url('http://example.com/image.png');
 background: url(bgimage.jpg) no-repeat;
    etc.

* http://whereswalden.com/files/mozilla/background-size/more-examples.html

Initial value: transparent || none || repeat || scroll || 0% 0%

 background-color: white;
 
 background-image: url('file.png')
 
 background-repeat: no-repeat;
   stops the image repeating (tiling)
 
 background-attachment: scroll / fixed / local;
 
 background-position: 0% 0%
 
 background-size: 100%;
   make background exactly fit element
 background-size: 50% 50%;

* http://www.tizag.com/cssT/background.php/
* http://css-tricks.com/perfect-full-page-background-image/
* http://www.vanseodesign.com/css/background-properties/ - w/ css3

* http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
* http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html
* http://www.impressivewebs.com/image-tint-blend-css/
* http://lea.verou.me/2012/04/background-attachment-local/


gradients

* https://developer.mozilla.org/en-US/docs/CSS/gradient

* http://24ways.org/2010/everything-you-wanted-to-know-about-gradients/
* http://lea.verou.me/css3-gradients/
* http://nicolahibbert.com/css3-alpha-transparent-gradients/

* http://cubiq.org/dropbox/cssgrad.html


linear

* https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

 linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

 background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
 background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));


#00ffffff colour breaks Sass (argb hex)


radial

* https://developer.mozilla.org/en-US/docs/CSS/radial-gradient

* http://joevennix.com/2011/06/29/Add-a-spotlight-sheen-to-your-backgrounds-with-CSS3.html


Tools

* ColorZilla Ultimate CSS Gradient Generator

* http://gradients.glrzad.com/

* http://www.webtutorialplus.com/gradient-generator.aspx
* http://westciv.com/tools/radialgradients/


mask

* https://developer.mozilla.org/en-US/docs/CSS/mask

No IE or FF [5]. FF SVG hack.

* http://mir.aculo.us/2012/09/16/masking-html-elements-with-gradient-based-fadeouts


box-shadow

box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?, .etc

 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
 box-shadow: inset 0 0.3em 10px -8px black;

* http://creativejuiz.fr/trytotry/css3-box-shadow-after-before/
* http://playground.genelocklin.com/depth/
* http://theamazingweb.net/2012/09/20/special-box-shadow-with-css/

* http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_box-shadow.htm


white-space

* https://developer.mozilla.org/en-US/docs/CSS/white-space
* http://www.quirksmode.org/css/whitespace.html  - view source for examples


outline

* http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
* http://htmldog.com/reference/cssproperties/outline/


transform

* https://developer.mozilla.org/en-US/docs/CSS/transform
* https://developer.mozilla.org/En/CSS/Using_CSS_transforms

* http://www.midwinter-dg.com/blog_demos/css-isometric-text/

* 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.
** csswarp.js

* http://css-tricks.com/snippets/css/flip-an-image/
* http://www.dzyngiri.com/index.php/beautiful-thumbnail-hover-effect-using-css3/

* http://ademilter.com/lab/liffect/


transition

* https://developer.mozilla.org/en-US/docs/CSS/transition
* https://developer.mozilla.org/En/CSS/CSS_transitions
* http://oli.jp/2010/css-animatable-properties/

* https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
* http://www.onextrapixel.com/2011/10/17/animating-colors-using-css3-transitions-with-jquery-fallback/

* http://blog.alexmaccaw.com/css-transitions [6]

* http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

* http://www.dzyngiri.com/index.php/beautiful-thumbnail-hover-effect-using-css3/
* http://codepen.io/html5web/pen/EFyzB

* http://jsfiddle.net/g7Bdt/11/
 transition: color 1s ease;
 transition: background 1s ease;
 transition: background-color 1s ease;

* https://developer.mozilla.org/en-US/docs/CSS/transition-timing-function
* http://www.the-art-of-web.com/css/timing-function/
* http://www.tangledindesign.com/blog/css3-transitions-the-transition-timing-function-property-explained/

 transition-timing-function: ease
 transition-timing-function: ease-in
 transition-timing-function: ease-out
 transition-timing-function: ease-in-out
 transition-timing-function: linear
 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
 transition-timing-function: step-start
 transition-timing-function: step-stop
 transition-timing-function: steps(4, end)
 
 transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)


Shapes

* http://coderwall.com/p/xrxaxa

* http://cssdeck.com/labs/rounded-corners-with-css3-border-radius
* http://css-tricks.com/almanac/properties/b/border-radius/
* http://tympanus.net/Tutorials/CircleHoverEffects/
* http://cssdeck.com/labs/eclectic-circle-in-css3-animation
* http://philarcher.org/diary/2012/csscircles/

* http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/ - various ideas


Content


Sprites

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

* Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
** https://github.com/jakearchibald/sprite-cow

* http://spriteme.org/ - bookmarklet that makes sprite images and code from existing pages
* http://yostudios.github.com/Spritemapper/ - python


Data

* http://www.greywyvern.com/code/php/binary2base64
* http://rod.vagg.org/2012/05/data-uri-svg/

* http://dev.w3.org/html5/spec/single-page.html#attr-data
* http://html5doctor.com/html5-custom-data-attributes/
* http://archive.plugins.jquery.com/project/customdata


Canvas

* https://developer.mozilla.org/en/Canvas_tutorial

* http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

* Using HTML5/Canvas/Javascript to take screenshots
** http://hertzen.com/experiments/jsfeedback/
** http://www.elliottsprehn.com/preso/fluentconf/#/

* Canvas Editor for Chrome

* Ajax Animator

* http://impactjs.com/ejecta


Microdata

* http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html


IndexedDB

* http://greenido.wordpress.com/2012/10/05/how-to-use-indexeddb-simplest-example/


Animation

* http://www.w3.org/TR/css3-animations/
* https://developer.mozilla.org/en/CSS/CSS_animations
* http://www.jasondavies.com/animated-bezier/
* http://daneden.me/animate/

* http://davidwalsh.name/css-flip
* http://www.the-art-of-web.com/css/css-animation/
* http://tutorialzine.com/2009/12/colorful-clock-jquery-css/
* http://davidwalsh.name/demo/css-zoom.php
* http://jsdo.it/ksk1015/cLLl

* http://lea.verou.me/2012/02/simpler-css-typing-animation-with-the-ch-unit/
* http://labs.mitgux.com/smooth-scroll-to-top-using-css3-animations/

* https://github.com/daneden/animate.css


Tools

* http://matthewlein.com/ceaser/


Examples

* http://thegoodman.cc/


3D

* http://bmccreative.com/blog:animated-page-entry-with-css3

* http://codepen.io/peterwestendorp/pen/wGECk


Javascript

* https://github.com/jlongster/css-animations.js


Filters

* http://html5-demos.appspot.com/static/css/filters/index.html [7]

* http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow

only chrome has native support as of nov 2012.

* https://github.com/Schepp/CSS-Filters-Polyfill
** http://www.der-schepp.de/css-filters-polyfill/examples/static-vs-animated/static.html


Header, footer

* http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height

* http://jsfiddle.net/6PSVU/ - bottom: 0;


Full screen

* https://developer.mozilla.org/en/DOM/Using_full-screen_mode

* http://brad.is/coding/BigScreen/


Buttons

* Zocial button set with CSS. Entirely vector-based social buttons.
** https://github.com/samcollins/css-social-buttons

* CSS3 Social Sign-in Buttons
** https://github.com/necolas/css3-social-signin-buttons
* CSS3 Facebook Buttons
** https://github.com/necolas/css3-facebook-buttons


Icons

Pure CSS3.

* CSS3 Monochrome Icon Set - A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.

* http://one-div.com/


Scrollbars

See also JS

* http://css-tricks.com/custom-scrollbars-in-webkit/


Tooltips

* http://kushagragour.in/lab/hint/


Misc

* https://code.google.com/p/css3-graphics/
* http://one-div.com/
* http://codepen.io/html5web/pen/puGal

* http://philipwalton.com/articles/the-future-of-oocss-a-proposal/

* http://mathiasbynens.be/notes/css-without-html

* http://davatron5000.github.com/deCSS3/ - bookmarklet to test pre css3 browsers

* http://www.youtube.com/watch?v=a2_6bGNZ7bA Faster HTML and CSS: Layout Engine Internals for Web Developers


Backwards compatibility

Various methods and polyfills.

* https://developers.google.com/chrome/chrome-frame/
** http://en.wikipedia.org/wiki/Google_Chrome_Frame


Accessibility

* http://en.wikipedia.org/wiki/Web_accessibility
* http://diveintoaccessibility.info/table_of_contents.html - free book, 30 days to a more accessible web site


W3C

* Web Content Accessibility Guidelines (WCAG) 2.0
** Web Content Accessibility Guidelines (WCAG) Overview
** How to Meet WCAG 2.0
** Techniques for WCAG 2.0 [8]

* http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page


etc.

* http://webaim.org/articles/
* http://www.sigmer.com/accessibility_statement.html

BS 8878, Web accessibility - Code of Practice,  is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan
* http://www.hassellinclusion.com/bs8878/
* http://www.access8878.co.uk/

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]

* http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/

* http://webaim.org/techniques/keyboard/tabindex
** http://wave.webaim.org/toolbar - for firefox

* http://www.daltonize.org/

* http://laneshill.me/2012/12/10-easy-things-all-web-developers-should-do-for-web-accessibility/
* http://blog.silktide.com/2013/01/things-learned-pretending-to-be-blind-for-a-week/


Screen readers

* http://www.freedomscientific.com/products/fs/jaws-product-page.asp
* http://www.nvda-project.org/

* https://live.gnome.org/LSR

* http://www.youtube.com/watch?v=92pM6hJG6Wo


robots.txt

* http://en.wikipedia.org/wiki/Robots_exclusion_standard


Markup

?? <element.class#id>. to lookup ml, etc

* http://johnmacfarlane.net/pandoc/

* http://daringfireball.net/projects/markdown/
** http://www.codinghorror.com/blog/2012/10/the-future-of-markdown.html [10]
** https://github.com/mwhite/resume
** https://github.com/yoavram/markx

* https://www.phpbb.com/community/faq.php?mode=bbcode

* http://criticmarkup.com/

* http://mrcoles.com/demo/markdown-css/


Future

* http://www.xanthir.com/blog/b4KT0
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=HTML/CSS&oldid=8178"