FB Doug Meet

Search This Blog

Loading...

October 11, 2011

Normalize THICSS! PLUS (Inline HTML5 Inline ConverCSSion by Premailer for NoCSSterous!)

Normalize THICSS!

PLUS (Premailer for NoCSSterous)

normalize.css

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

Check out the demo

What does it do?

Normalize THICSS! PLUS (Inline HTML5 Inline ConverCSSion by Premailer for NoCSSterous!)

 

  • Preserves useful defaults, unlike many CSS resets.
  • Normalizes styles for a wide range of elements.
  • Corrects bugs and common browser inconsistencies.
  • Improves usability with subtle improvements.
  • Explains what code does using detailed comments.

How to use it

Normalize.css is intended to be used as an alternative to CSS resets.

It is suggested that you read through the normalize.css file and customise it to meet the design requirements of a project rather including it as a "black box".

If you prefer to use a different CSS formatting style, consider using a tool like Procssor.

If you would like to minify the file, you can use a tool like this online CSS compressor using YUI Compressor or perform the minification as part of your build process.

Browser support

  • Google Chrome
  • Mozilla Firefox 3+
  • Apple Safari 4+
  • Opera 10+
  • Internet Explorer 6+

License

Public domain

Acknowledgements

Normalize.css is a project by Nicolas Gallagher and Jonathan Neal.

  • First Page
  • Second Page
  • Third Page
  • Last Page

Section Heading 1

#boxsize button, #boxsize input, #boxsize select, #boxsize textarea { width: 200px; padding: 5px; border: 1px solid #333; }

Grouped Heading 1

Grouped Heading 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This should be hidden in all browsers, apart from IE6

Section Heading 1

Article Heading 2

Address: somewhere, world
Dogmeat_and_tbl_invented_the_internet_have_you_seen_it
Wer
Dogmeat_and_eric_meyer_invented_css_dont_forget_howcome_have_you_seen_it

 

Minification v Obfuscation

March 6, 2006 at 7:08 pm by Douglas Crockford | In Development | 61 Comments

JavaScript is a load-and-go language. Programs are delivered to the execution site as text (not as executable or semi-compiled class files) where it is compiled and executed. JavaScript works well with the Web, which is a text delivery system, because it is delivered as text.

There are two downsides of textual delivery of programs. The first is code size. The source can contain material (such as whitespace and comments) which aids in the human interpretability of the program, but which is not needed for its execution. Transmitting superfluous material can significantly delay the download process, which keeps people waiting. If we could first strip out the whitespace and comments, our pages would load faster.

The second downside is code privacy. There might be a concern that someone could read the program and learn our techniques, and worse, compromise our security by learning the secrets that are embedded in the code.

There are two classes of tools which deal with these problems: minifiers and obfuscators.

A minifier removes the comments and unnecessary whitespace from a program. Depending on how the program is written, this can reduce the size by about half. An obfuscator also minifies, but it will also make modifications to the program, changing the names of variables, functions, and members, making the program much harder to understand, and further reducing its size in the bargain. Some obfuscators are quite aggressive in their transformations. Some require special annotations in the source program to indicate what changes might or might not be safe.

Any transformation carries the risk of introducing a bug. Even if the obfuscator didn’t cause the bug, the fact that it might have is a distraction which will slow down the debugging process. The modifications to the program also add significantly to the difficulty of debugging.

After minifying or obfuscating, you should GZIP. GZIP can further reduce the size of the program. GZIP is so effective that the difference in the efficiency between minification and obfuscation becomes insignificant. So I prefer minification with GZIP because I don’t have time for programming tools that can inject bugs into good programs.

  Full Source Minified
Uncompressed 78151 38051
Compressed with gzip 15207 10799

The table shows the results of using a minifer and gzip on a 78K source file. The result of using the two techniques together produced a result that is only 14% the size of the original source file.

Then finally, there is that question of code privacy. This is a lost cause. There is no transformation that will keep a determined hacker from understanding your program. This turns out to be true for all programs in all languages, it is just more obviously true with JavaScript because it is delivered in source form. The privacy benefit provided by obfuscation is an illusion. If you don’t want people to see your programs, unplug your server.

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

Embedded content

audio

img

svg

video

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html> <head> </head> <body> <div class="main"> <div> </body> </html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

unordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

description list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

figure

Figcaption content

Tabular data

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Forms

Inputs as descendents of labels (form legend)

Inputs as siblings of labels

Clickable inputs and buttons

Reset (button)

Button (button)

Submit (button)

box-sizing tests
Reset (button)
Button (button)
Submit (button)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Section Heading 2

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Section Heading 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Article Heading 4

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Article Heading 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Article Heading 6

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

  1. Sed ut perspiciatis unde
  2. omnis iste natus error
  3. sit voluptatem accusantium
  • doloremque laudantium
  • totam rem aperiam eaque
  • ipsa quae ab illo
Definition list term #1
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Definition list term #2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Confucius, The Confucian Cite, (551 BC - 479 BC)

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Lorem ipsum dolor a element sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur abbr element adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor b element sit amet, consectetur i element adipisicing elit, sed s element do eiusmod tempor u element incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor code element sit amet, consectetur kbd element adipisicing elit, sed samp element do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur strong element adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor cite element sit amet, consectetur dfn element adipisicing elit, sed em element do eiusmod tempor q element incididunt ut labore var element et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur del element adipisicing elit, sed strike element do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur ins element adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed sub element do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore sup element et dolore magna aliqua.

Normalize THICSS! PLUS (Premailer for NoCSSterous) normalize.css Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the st ...»See Ya