HTML/CSS

From Things and Stuff Wiki
Jump to navigation Jump to search


Standards

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

See also HTTP, Documents







  • http://en.wikipedia.org/wiki/Open_Web_Platform - OWP, a collection of Web technologies developed by the World Wide Web Consortium and other Web standardization bodies such as the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. The standards of the Open Web Platform are at different maturity levels, and the development of most standards is still in progress.

OWP covers Web standards such as HTML5, CSS 2.1, CSS3 (including the Selectors, Media Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns modules), CSS Namespaces, SVG 1.1, MathML 3, WAI-ARIA 1.0, ECMAScript 5, 2D Context, WebGL, Web Storage, Indexed Database API, Web Workers, WebSocket Protocol/API, Geolocation API, Server-Sent Events, Element Traversal, DOM Level 3 Events, Media Fragments, XMLHttpRequest, Selectors API, CSSOM View Module, Cross-Origin Resource Sharing, File API, RDFa, WOFF, HTTP 1.1 (part 1-7), TLS 1.2, and IRI.


  • web-platform-tests dashboard - displays results for the web-platform-tests, or WPT, which are a group of test suites for many web platform specifications. If the web platform as a whole were an engineering project, it'd be crazy not to have a test suite that's run regularly. The goal of the WPT Dashboard is to promote viewing the web platform as one entity and to make identifying and fixing interoperability issues as easy as possible. The WPT Dashboard project is comprised of two parts: Running: currently the goal is to run WPT in Chrome, Edge, Firefox, and Safari daily, Serving: this site, wpt.fyi, displaying test results.


See also Data



HTML

CSS


  • 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less. [7]


Docs, guides, etc.

Basics

Resources

  • W3Techs - World Wide Web Technology Surveys


Articles

Project basics

Favicon

Articles





Tools

JavaScript




Resets, normalize, etc.

See also WebDev#Templates and Frameworks

Different browsers have different defaults. You can either reset them to zero, or normalise with cross-browser sensible defaults.








  • Element CSS - a CSS design / framework that only requires simple HTML elements for building a site. In contrast to most design frameworks that use a lot of nested
    elements and inline classes, Element does away with that, making it quicker and easier to create decent-looking static web sites from scratch that are easy to edit and manage with just a text editor.Think of it as a "Markdown for HTML", or "saner defaults for HTML elements".


  • tacit - a CSS framework for dummies, who want their web services to look attractive but have almost zero skills in graphic design


  • Water.css - a just-add-css collection of styles to make simple websites like this just a little bit nicer. Get it already!Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you. [18]




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


Elements and structure

Outline

 <body>
 <h1>heading text</h1>
  <section><h2>heading text...
   <section><h3>heading text...
    <section><h4>heading text...
     <section><h5>heading text...
       <section><h6>heading text...

hrm;

Doctype

Meta

Style

Script

 <script type="text/javascript" src="http://use.typekit.com/rwc5tlm.js"></script>

 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Sections

  • sections;
    • body, main, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address

main

Grouping

  • p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div

div

Lists

list-style: disc | circle | square

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;
}

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

a

Using target="_blank" will instruct the browser to create a new browser tab or window when the user clicks on the link.


span

Comments

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

Images

See Graphics



  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture - contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios. The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.



Quote

Forms and input


Commands

Video

attribute float playbackRate;


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, styling has advantages and disadvantages.. 

<table border="1">
   <tr>
     <th colspan="2">Table header</th>
   </tr>
   <tr>
     <td>Table cell 1</td><td>Table cell 2</td>
   </tr>
 </table>

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
  • vw - Equal to 1% of the width of the initial containing block.
  • vh - Equal to 1% of the height of the initial containing block.
  • vmin - Equal to the smaller of ‘vw’ or ‘vh’.
  • vmax - Equal to the larger of ‘vw’ or ‘vh’.

These new properties allow you to scale font sizes according to the viewport dimensions, i.e. 

1vw is 1% of the viewport width
1vh is 1% of the viewport height
1vmin is the smallest of 1vw and 1vh

For example, assume your browser viewport is set to 1,000 x 1,200 pixels: 

1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size

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

#bada55, etc.

Selectors

h1 > h2
  child combinator
  just matching first order descendant elements

Specificity

HN: 256 CSS Classes Can Override an #id

!important

Attribute selectors

img[src*="hideme"] {
  display: none;
}

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.

: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.
  • selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
lang

Parent

CSS Selectors 4 Spec

Layout

width

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

float

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

clear

position

position: absolute - out of flow
position: fixed

sticky

vertical align

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

overflow

prevent scrollbars

z-index

z-index works only on absolute or relative positioned elements.

via js; 

object.style.zIndex="1"

Flexbox




CSS Grid



box-sizing

clip

Tips

css is stoopid

Text

See also Typography

font-weight

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-weight: inherit;

font-style

font-style: normal;
font-style: italic;
font-style: oblique;

font-style: inherit;


font-variant-numeric

font-variant-numeric: oldstyle-nums;

text-align

text-align [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end

text-rendering

text-rendering auto | optimizeSpeed | optimizeLegibility | geometricPrecision

"Basically, setting the value of “optimizeLegibility” for the “text-rendering” property lets you enable things like ligatures and more accurate kerning (the spacing between letters), which, as the name of the value implies, leads to improved legibility and an overall better appearance of the text as unnecessary spaces are eliminated where possible."

"There are actually significant, effectively fatal performance problems (such as 30-second loading delays, or longer) on mobile devices when using optimizeLegibility for long pages."

text-transform

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

text-shadow

text-shadow: 0 1px 0 rgba(255,255,255,.1);

color: #fff;
text-shadow: 0 0 40px rgba(255,255,255,.25);

See also Style#Shadows

text-stroke

Webkit only.

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

text-overflow

text-overflow  [ clip | ellipsis | <string> ]
  determines how overflowed content that is not displayed is signaled to the users.

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

word-wrap

mask-image

Other

Properties

background

  • background transparent || none || repeat || scroll || 0% 0%
background: #f00;
background: url('http://example.com/image.png');
background: url(bgimage.jpg) no-repeat;

.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
    linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
      url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}

background-color

background-color: white;

background-image

background-image: url('file.png')

background-repeat

background-repeat: no-repeat;
  stops the image repeating (tiling)

background-position

background-position: 0% 0%
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;

background-attachment

background-attachment: scroll / fixed / local;

background-size

background-size: 100%;
  make background exactly fit element

background-size: 50% 50%;

background-clip

background-clip: border-box / padding-box / content-box;
   specifies whether an element's background, either the color or image, extends underneath its border.

background-clip: text;
  works well with text-fill-color: transparent;

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 */



border-radius

broder-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

gradients



linear

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));


  1. 00ffffff colour breaks Sass (argb hex)

radial

Tools


gradient borders

mask

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

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;

See also Style#Shadows

white-space

outline

opacity

transform

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

transition

body {
  transition:all .5s ease-in-out; 
  -o-transition:all .5s ease-in-out; 
  -moz-transition:all .5s ease-in-out; 
  -webkit-transition:all .5s ease-in-out;
}

transition: color 1s ease;
transition: background 1s ease;
transition: background-color 1s ease;

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)

wrap

filter

cursor

color


  • Mother-effing hsla() - HSL(a) is the jam. It's a piece of cake to do mentally, too. Hue is like this: ROY G BIV is 0 to 300, and then back to red again at 360. Saturation % is from grey to intense color; lightness % and alpha 0-1 are easy 'nuff. read more on hsl awesomeness. Another HSL colorspace mnemonic: our friends RGB are at 0, 120, and 240. And yellow, cyan, magenta (from CMYK) are split between those ones at 60, 180, and 300. Naice!


scroll-padding-*

CSS forms

Shapes

Shapes (old)

Buttons

  • Buttonize - The Instant Button Companion v3.1

Icons

See also Typography#Webfont icons, Graphics#Icons

Shapes

Patterns

Tooltips

  • Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.

Forms

Animations

Other

Sprites

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

Canvas





Text


  • CanvasText is a library written in JavasScript that lets you write styled text easier and with a similar HTML & CSS syntax.


Images


Screenshots


Polyfill


Extensions


Other

  • Ejecta - A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS

Animation

Tools



Examples

3D

Javascript

Menus

Filters

only chrome has native support as of nov 2012.

Header, footer

Tabs

Iframes


Full screen

Scrollbars

See also JS

Printing


CSS libraries

Data URI

 <img src="data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
       alt="transparent placeholder" />


Data Attributes


article[data-columns='3']{
  width: 400px;
}
article[data-columns='4']{
  width: 600px;
}

Microdata

See also Semantic web, Data


  • https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop - used to add properties to an item. Every HTML element can have an itemprop attribute specified, and an itemprop consists of a name-value pair. Each name-value pair is called a property, and a group of one or more properties forms an item. Property values are either a string or a URL and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.

IndexedDB

webstorage

  • Storage interface
  • sessionStorage attribute
  • localStorage attribute
  • storage event
  • etc.
  • dustbin - A slim wrapper around localStorage and sessionStorage that allows for NoSQL style access. It's basically a JSON-backed object database for your web browser.
  • SASStore - Simple binary string data store for local storage in the browser.

Media

See JS libs#Media

Web Components





  • Polymer - a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. A set of polyfills (Shadow DOM, Custom Elements, HTML Imports), and a next-generation web application framework built upon these core technologies called the Polymer.




Shadow DOM

Custom Elements

  • X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.

Web Annotations

  • W3C Web Annotation Working Group - The W3C Web Annotation Working Group is chartered to develop a set of specifications for an interoperable, sharable, distributed Web Annotation architecture.


  • Deliverables of W3C’s Web Annotation Working Group - Deliverables of W3C’s Web Annotation Working Group. Note that the Working Group is now Closed; for further discussions on the evolution of Web Annotation technologies at W3C, possible errata, etc, please join the W3C Open Annotation Community Group. In particular, if you want to submit an erratum, the best is to follow the procedure described on the errata page of the documents.


  • Open Annotation Community Group - The purpose of the Open Annotation Community Group is to work towards a common, RDF-based, specification for annotating digital resources. The effort will start by working towards a reconciliation of two proposals that have emerged over the past two years: the Annotation Ontology and the Open Annotation Model . Initially, editors of these proposals will closely collaborate to devise a common draft specification that addresses requirements and use cases that were identified in the course of their respective efforts. The goal is to make this draft available for public feedback and experimentation in the second quarter of 2012. The final deliverable of the Open Annotation Community Group will be a specification, published under an appropriate open license, that is informed by the existing proposals, the common draft specification, and the community feedback. http://code.google.com/p/annotation-ontology/ http://www.openannotation.org/spec/beta/





  • https://github.com/jankaszel/simple-annotation-server - a very simple annotation server intended for testing purposes, implementing both the Web Annotation Protocol as well as the Web Annotation Data Model with simple REST-based user management. The server is written in JavaScript and runs in Node.js, running an in-process LevelDB database.



  • Apache Annotator (incubating) - provides annotation enabling code for browsers, servers, and humans. Growing out of the experiences with web annotation software (Annotator.js, Hypothes.is, and others), Apache Annotator is a collaboration between developers of annotation tools to bundle our efforts. The goal is to help developers of annotation tools create their applications without having to reinvent the wheel, while applying a standards-driven approach based on the W3C’s Web Annotation data model, in order to facilitate an ecosystem of interoperable annotation tools — ideally making annotations an integral part of the web.


  • annorepo | Annotation Repository - A webservice for W3C Web Annotations, implementing the W3C Web Annotation Protocol, plus custom services (batch upload, search, etc.).


Misc

Compatibility

Various methods and polyfills.

robots.txt

Other





tools

Future

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