• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML reset czy używacie?

Object Storage Arubacloud
0 głosów
476 wizyt
pytanie zadane 7 czerwca 2017 w HTML i CSS przez Rafał Szrajnert Nowicjusz (170 p.)
zmienione kategorie 7 czerwca 2017 przez Comandeer

Cześć, wiem że było podobne pytanie (CSS reset) ale ilu z Was nie używa lub uzywa? Mirosław na filmikach nie używa.  Ja mam taki template i byłem uczony na kursie żeby zawsze wklejać w CSS:

 

/*
    HTML5 Reset :: style.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:

    Eric Meyer                    :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate    :: http://html5boilerplate.com

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

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {max-width: 100%;}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
    In fact, it *will* cause problems with Google Maps' controls at small size.
    If this is the case for you, try uncommenting the following:

#map img {
        max-width: none;
}
*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
    you'll have to restore the bullets within content,
    which is fine because they're probably customized anyway */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: separate; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }
/*arial */

 

komentarz 7 czerwca 2017 przez Jedras Maniak (54,860 p.)
Ja nie wklejam tylko linkuję jako osobny arkusz. Czasem się przydaje, bo różne przeglądarki mają inne domyślne ustawienia co do interpretowania stylów.
1
komentarz 7 czerwca 2017 przez Lu Kiss Dyskutant (7,600 p.)
Linkując dużą ilość osobnych arkuszy zamiast jednego, który zawiera w sobie cały kod + kompresja kodu (np. style.min.css) wydłużasz czas renderowania strony. Nie jest to dobre przy optymalizacji np pod SEO
komentarz 8 czerwca 2017 przez OfftheCode Gaduła (4,050 p.)
Potwierdzam info od kolegi z góry, żeby temu zaradzić, a mimo wszystko mieć projekt z ładnie ułożonymi plikami, zapoznaj się z preprocesorami css, możesz tam mieć jeden plik główny np main.scss gdzie będziesz miał importy pozostałych plików, po czym po kompilacji otrzymujesz jeden plik z zawartymi treściami zbpozostalych plików. Zupełnie jakbyś linkował biblioteki w np. C++
komentarz 8 czerwca 2017 przez UltraSF Stary wyjadacz (11,740 p.)

OfftheCode Też tak robię, proces twórczy to wszystko czytelnie nie koniecznie zoptymalizowane, a jak już jest wszystko super, to optymalizuje i rb min js, css. Czy łącze zdjęcia w jeden plik. Polecam, bo inaczej można się zgubić pod czas procesu twórczego.

4 odpowiedzi

+2 głosów
odpowiedź 7 czerwca 2017 przez Comandeer Guru (601,490 p.)
Nie używam. Przestałem postrzegać strony w kontekście stron, a zbiorów niezależnych komponentów. Przy takim rozumowaniu miejsca na style globalne zwyczajnie nie ma.
0 głosów
odpowiedź 7 czerwca 2017 przez Lu Kiss Dyskutant (7,600 p.)

używam tylko tego:

*,*:before,*:after {
	box-sizing: border-box;
}
body, 
figure, 
html {
	margin:0;
}
img {
	display:inline-block;
	border:0;
	max-width:100%;
	height:auto;
	vertical-align:middle;
}

Jak zresetujesz wszystko to potem więcej pisania aby wszystko na nowo ustawić. 

0 głosów
odpowiedź 8 czerwca 2017 przez Milesq Nałogowiec (32,020 p.)
Tak na prawdę html mówi tylko co ma byc a domyślny css sprawia np. Ze nie widać skekcji head cała przeglądarka to tak na prawdędomyslny css i js
komentarz 8 czerwca 2017 przez surfeliza Stary wyjadacz (11,260 p.)
"Domyślny css" nie sprawia, że nie widać sekcji head.
komentarz 8 czerwca 2017 przez Milesq Nałogowiec (32,020 p.)

Zależy gdzie ale coś takiego

head
{
display: block;
}
title
{
display: block;
}

 

pokaże titl'a a w domyślnym css w niektórych przeglądarkach jest zapis head{display:none}

0 głosów

Podobne pytania

0 głosów
2 odpowiedzi 701 wizyt
pytanie zadane 12 lutego 2016 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)
+1 głos
1 odpowiedź 243 wizyt
pytanie zadane 19 października 2017 w HTML i CSS przez firefoxlin Początkujący (290 p.)
0 głosów
1 odpowiedź 218 wizyt

92,576 zapytań

141,426 odpowiedzi

319,650 komentarzy

61,961 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...