Help with Modified CSS Reset

[tun712]

I’ve created modified CSS reset based on various reset stylesheets available.
Need some help to make it effective & clean.

Need some help with typography

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
*:focus {
    outline: none;
}
::-moz-selection {
background: #ccc;
color: #fff;
}
::selection {
    background: #ccc;
    color: #fff;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body, html {
    width: 100%;
    height: 100%
}
body {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 2;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
hr {
    box-sizing: content-box;
    height: 0;
}
a {
    font-size: 100%;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    text-decoration: none;
    color: #000;
    outline: none;
    background-color: transparent;
}
a:hover, a:visited, a:active, a:focus {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    text-decoration: none;
    color: #000;
    outline: none;
}
a:focus, a:active, button::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
 border: 0;
 outline: 0;
}
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    border-bottom: none;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}
sub {
    bottom: -.25em;
}
sup {
    top: -.5em;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, select {
    text-transform: none;
}
button, hr, input {
    overflow: visible;
}
progress, sub, sup {
    vertical-align: baseline;
}
[type=checkbox], [type=radio], legend {
    box-sizing: border-box;
    padding: 0;
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
 padding: 0;
 border-style: none;
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
 outline: ButtonText dotted 1px;
}
legend {
    display: table;
    max-width: 100%;
    white-space: normal;
    color: inherit;
}
textarea {
    overflow: auto;
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
 height: auto;
}
[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
}
[type=search]::-webkit-search-decoration {
 -webkit-appearance: none;
}
::-webkit-file-upload-button {
 font: inherit;
 -webkit-appearance: button;
}
summary {
    display: list-item;
}
[hidden], template {
    display: none;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul, li {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
blockquote, q {
    quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
small {
    font-size: 85%;
}
strong {
    font-weight: 700;
}
td, td img {
    vertical-align: top;
}
.clearfix:after, .clearfix:before {
    display: block;
    overflow: hidden;
    height: 0;
    content: '\0020';
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin: 0 0 10px;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 24px;
    font-weight: 800;
}
h4 {
    font-size: 20px;
    font-weight: 700;
}
h5 {
    font-size: 18px;
    font-weight: 400;
}
h6 {
    font-size: 14px;
}

[rproffitt]

Typography is (from the web).

The art or procedure of arranging type or processing data and printing from it.

As such you may have to describe in detail what's not to your liking. Color, spacing, texture?

[gentlemedia]

Don't just copy/patse stuff from several CSS resets into your own unless you know what these CSS decleration do. Like now you're also repeating a lot of porperties.

I'd recommend to just stick with normalize.css and for typography it doesn't make sense anymore to reset your headings since RWD became the norm. Better look into responsive fluid typography which give you something like so:

:root {
    font-size: calc(.75rem + 1vw);
}

There are several ways of doing this but via google you find lots of articles written about this technique.

[tun712]

@rproffitt -

Need help to make responsive fonts for all devices.

@gentlemedia -

Would you like to help to reduce repeating porperties & make clean css reset?

I’ve tried various css reset including normalize.css. Each reset gives different result, not so big difference, but have something different from each other. So I'm trying to create little more accurate css reset for my project. Also I'm trying to add responsive font size for different viewport size.

Still need some help

@both
Thanks

[rproffitt]

@t, Aha, the holy grail to find a way to accomodate all devices PLUS accuracy. Have you seen such working yet? I haven't. At the office we had a test setup with Android running Chrome from a tiny 3x3 inch screen all the way up to a 21.5 inch "tablet." I never saw a single site handle that setup. And now you want "accurate." What I did see was it was usable on sites the used RWB. I think the web masters had done quite well at that point.

And all the displays were a little different. But it worked. Now imagine a person that wanted an exact (accurate) layout and fonts across thes 6 or more screen and resolutions. They have their work cut out for them. I don't agree this is broken in normalize.css.

[tun712]

@rproffitt

Thanks

Got your point. I was checking design at mattkersley & Am I Responsive. I had some problems so I was looking for some accuracy.

BTW I’ve revised my code, please look at it.

::-moz-selection {
background: #c2c2c2;
color: #fff;
text-shadow: none;
}
::selection {
    background: #c2c2c2;
    color: #fff;
    text-shadow: none;
}
*, ::before, ::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*:focus {
    outline: none;
}
html, body {
    height: 100%;
}
html {
    line-height: 1.15; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    word-wrap: break-word;
}
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    line-height: 1.15;
    vertical-align: baseline;
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
audio, video {
    display: inline-block;
}
hr {
    height: 0;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
small {
    font-size: 80%;
}
b, strong {
    font-weight: bolder;
}
caption {
    font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
    line-height: 1.2;
    font-weight: 600;
}
h1 {
    font-size: 4.286rem;/* -60px- */
}
h2 {
    font-size: 3.429rem;/* -48px- */
}
h3 {
    font-size: 2.571rem;/* -36px- */
}
h4 {
    font-size: 1.714rem;/* -24px- */
}
h5 {
    font-size: 1.286rem;/* -18px- */
}
h6 {
    font-size: 1.143rem;/* -16px- */
}
img {
    border: none;
    max-width: 100%;
    height: auto;
}
abbr[title] {
    border-bottom: none; 
    text-decoration: underline; 
    text-decoration: underline dotted; 
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}
a {
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
a:hover, a:visited, a:active, a:focus {
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    line-height: 2;
}
p a, p a:hover {
    color: #fff;
    text-decoration: underline;
    outline: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
 a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
border: none;
outline:  none;
padding: 0;
}
 a:focus, a:active, button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
 outline: 1px dotted ButtonText;
}
[type="checkbox"], [type="radio"] {
    box-sizing: border-box; 
    padding: 0; 
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
 height: auto;
}
[type="search"] {
    -webkit-appearance: textfield; 
    outline-offset: -2px; 
}
[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}
::-webkit-file-upload-button {
 -webkit-appearance: button; 
 font: inherit; 
}
[hidden] {
    display: none;
}

[gentlemedia]

Do websites need to look exactly the same in every browser?

Having said that I advise you again to use normalize.css, because that's the way to go nowadays. If you write your own base styles in your CSS, you will overwrite lots of browser default CSS anyway.
And for the responsive fluid typugraphy I gave you already the trick to do so, but you will have to study a bit yourself about this technique and decide for yourself what suits best for the fonts and the type of layout you use in your project.

[rproffitt]

@OP. Put such up on a web site with before and after so we can see what's going on. Reading your code is one thing but I don't see what's wrong yet. Much if not all that I've read from you sounds like you are chasing The Holy Grail where the site is perfect across all devices. And again I've yet to find such a site. Most web masters only have so much time and head for usable RWD rather than perfection.

I had this old app that cut off the last row of pixels on a mobile screen. Given it was quite clear what was on the screen I didn't fix it due to budget and time. Years later they came up with the budget and that was spent talking about how many pixels were on the screen (only 300x300!) and how we could address the missing line of pixels. Seemed odd to me to fix something like this but hey, a thousand bucks is a thousand bucks.

[tun712]

@both

Thanks

I'd be sticking with normalize.css.

Working on media queries to achieve clients needs