All geek questions in one place

Andy Clark "Universal Internet Explorer 6 CSS" vs. Eric Mayer "CSS Reset"

Universal Internet Explorer 6 CSS

CSS code:

/* -------------------------------------------------------------- 
Standardised Internet Explorer 6 stylesheet:
http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

Based on the work of:
Mark Boulton: http://markboulton.co.uk
Eric Meyer: http://meyerweb.com
Cameron Moll: http://www.cameronmoll.com/
Richard Rutter: http://clagnut.com
Khoi Vinh: http://subtraction.com

-------------------------------------------------------------- */

html,           body, 
div,            span, 
object,         iframe, 
h1, h2, h3, h4, h5, h6, 
p,              blockquote, 
pre,            a, 
abbr,           acronym, 
address,        code, 
del,            dfn, 
em,             img, 
q,              dl, 
dt,             dd, 
ol,             ul, 
li,             fieldset, 
form,           label, 
legend,         table, 
caption,        tbody, 
tfoot,          thead, 
tr,             th, td { 
margin : 0; 
padding : 0; 
border : 0; 
font-weight : inherit; 
font-style : inherit; 
font-size : 100%; 
font-family : inherit; 
vertical-align : baseline; }

/* Body ---------------------------------------------------- */

body {
width : 60%;

/* http://www.cameronmoll.com/archives/000892.html */
width : expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 120? "120em" : "auto");
margin : 0 auto;
padding : 2em 0;
background :  #fff;
font : 88% Georgia, Times, serif;
line-height : 1.4;
color : #333; }

/* Headings ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { 
font-weight : normal; }

h1 { 
margin-bottom : .5em;
font-size : 3em; 
line-height : 1; }

h2 { 
margin-bottom : .75em;
font-size : 2em; }

h3 {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

h4 {
margin-bottom : 1.25em;
font-size : 1.2em;
line-height : 1.25; }

h5, h6 { 
margin-bottom : 1.5em;
font-weight : bold; 
font-size : 1em; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { 
margin : 0; }

/* Text elements -------------------------------------------------------------- */

p { 
margin : 0 0 1.5em; }

a {
color : #105cb6; 
text-decoration : underline; }

a:visited { 
color : #105cb6; }

a:focus, a:hover { 
color : #003; }

a img {
border : none; }

blockquote, q {
quotes : "" ""; }

blockquote { 
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px solid #666;
font : italic 1.2em "Times New Roman", Times, serif; }

blockquote:before, blockquote:after, q:before, q:after { 
content : ""; }

strong { 
font-weight : bold; }

em, dfn { 
font-style : italic; }

dfn { 
font-weight : bold; }

sup, sub { 
line-height : 0; }

abbr, acronym { 
border-bottom : 1px dotted #666; }

address {
margin : 0 0 1.5em;
font-style : italic; }

del { 
color : #666; }

pre, code, tt {
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px dotted #666;
font : 1em 'andale mono', 'lucida console', monospace;
line-height : 1.5; }

pre { 
white-space : pre; }

code { 
display : block; }


/* Lists -------------------------------------------------------------- */

li ul, li ol { 
list-style-type : circle;
margin : 0 1.5em .75em 1.5em; }

ul, ol {
margin : 0 1.5em 1.5em 0; }

ul { 
list-style-type : disc; }

ol {
list-style-type : decimal; }

dl {
margin-bottom: 1.5em; 
padding-top: 1.5em; 
border-top : 1px solid #ccc; }

dl dt {
margin-bottom : .75em;
font-size : 1.2em;
line-height : 1.25; }

dd {
margin-bottom: 1.5em; 
padding-bottom: 1.5em; 
border-bottom : 1px solid #ccc; }

/* Tables -------------------------------------------------------------- */

table {
border-collapse : separate; 
border-spacing : 0;
margin-bottom : 1.4em;
width : 100%; }

table, td, th { 
vertical-align : top; }

th, thead th {
font-weight : bold; }

th, td, caption {
padding : 4px 10px 4px 5px; 
text-align : left; 
font-weight : normal; }

th, td {
border-bottom : 1px solid #ccc; }

tfoot { 
font-size : .9em; }

caption {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

/* Forms -------------------------------------------------------------- */

label { 
font-weight : bold; }

fieldset { 
margin : 0 0 1.5em 0; 
padding : 1.4em 1.4em 0 1.4em; 
border : 1px solid #ccc; }

legend {  
font-size : 1.2em; 
font-weight : bold; }

textarea { 
width : 390px; 
height : 250px; 
padding : 5px; }

Eric meyer CSS reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
  • If I create a site that should be compatible with IE 6, then should I use Universal CSS IE6 with eric meyer css reset or not or should I use Universal CSS IE6?
  • or should I use both, but Universal Internet Explorer 6 CSS is only for IE6, I mean the conditional comment.
  • or should I use both as normal css without conditional comment for IE6?

If I have to use both options, then what should be the order of placement. What should be the first in the source?

+3
3

CSS- Internet Explorer 6 - a reset CSS. .

, -. - - IE6, , , .

: CSS Internet Explorer 6

, IE6

+2

Andy Clarkes, , reset, , . IE 6 ( ).

, IE 6. CSS, , .

, , , , , . Internet Explorer .

0

CSS Reset . , , .

I have never been a fan of IE6 Universal CSS, as it seems a little intuitive to me in Reset for each element, and then applies the whole load of other default values ​​on the page.

My approach has always been: Reset each element (using CSS Reset) and start from scratch, later you may need CSS with IE6, but from my own experience there are usually no more than 4 or 5 elements that can be tagged using the IE6 conditional CSS file .

0
source

Source: https://habr.com/ru/post/1735777/

More articles:


All Articles