CSS

Dwie istotne kwestie często pojawiające się przy kodowaniu stron to błąd IE6 dotyczący elementu z float i marginesem w kierunku float’a oraz technika zamiany tekstu (najczęściej tytułów h) na grafikę. Opiszę je pokrótce oraz zaproponuje rozwiązania, które stosuje w codziennej pracy.

Powiększony margines (ang. IE5/6 Doubled Float-Margin Bug)

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
  }

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
display: inline;
  }

Zamiana tekstu na grafikę (ang. image replacement technique)

<!--HTML-->
<h1 id="logo"><a href="index.html">Nazwa firmy</a></h1>

/*CSS*/
h1#logo a {
display : block;
width : 100px;
height : 100px;
background : url(logo.gif) no-repeat;
text-indent : -999999px;
overflow:hidden;
outline:none;
}

Styl domyślny

Każda przeglądarka internetowa ma fabrycznie zdefiniowany, domyślny styl css (browser default/built-in stylesheet). Kod xhtml, który nie posiada przypisanego stylu jest renderowany z wykorzystaniem stylu domyślnego. Oczywiście taki stan rzeczy przewiduje specyfikacja css (stąd nazwa kaskadowy). Jest to pozytywna cecha, gdyż dokument xhtml (nie zawierający stylu) wyświetla się nam w wersji minimalistycznej i użytecznej, a nie jako jeden długi ciąg znaków.

Niestety w wielu przypadkach „defaultowe” style przeglądarek znacząco różnią się od siebie (szczególnie jeśli chodzi o elementy blokowe). Prowadzi to do niejednolitego wyglądu stron w zależności od przeglądarki. Szczególną niechęć webdesignerów w tej kwestii zyskały sobie różne wersje Internet Explorera, ale i na nie znalazł się sposób.

Metody restartowania stylu

Jedną z metod zapobiegania różnicom w wyświetlaniu treści jest resetowanie stylu, czyli nadpisanie stylu domyślnego stylem własnym (w kaskadzie styl domyślny jest najniżej w hierarchii). W sieci można znaleźć wiele tzw. resetów. Niektóre z nich są bardzo proste, ale i nie pozbawione wad, inne skomplikowane i tym samym niepotrzebnie rozbudowane. Według mnie ciekawą i wyważoną propozycją jest reset autorstwa Erica Meyera (eksperta css) prezentowany poniżej:

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

Reset ten oprócz niwelowania różnic elementów blokowych, zmienia też elementy liniowe określając standardowy krój czcionki.

Selektor uniwersalny

Nie polecam korzystania z selektora uniwersalnego (*) przy resetowaniu. Selektor wybiera wszystkie elementy, blokowe i liniowe, również te, dla których nie ma potrzeby ustawiać np. marginesu. Może się to przekładać na szybkość renderowania strony. W przypadku korzystania z formularzy można spodziewać się efektu „ścięcia” niektórych pól.

Własny reset

Warto podczas pracy tworzyć i usprawniać własny reset, który oczywiście może bazować na gotowych rozwiązaniach.

Znajomość domyślnych stylów przeglądarek oraz sposobów na ich „zneutralizowanie” jest elementem kluczowym w tworzeniu stron działających w różnych przeglądarkach. Reset znacznie ułatwia pracę i może zaoszczędzić godziny spędzone na szukaniu przyczyny niespójności stron przy kodowaniu.

W ramach przypomnienia sobie „trików” dla css’a postanowiłem zamieścić na blogu serię wpisów dotyczących tego jakże szerokiego zagadnienia.

Tematem pierwszej części jest prawidłowe wykorzystanie znacznika float

Float – podstawowe informacje

Float wykorzystywany jest do tworzenia tzw. pływających elementów. Mogą one znajdować się przy lewej lub prawej krawędzi obiektu, w którym się znajdują. Nie można używać go do wyśrodkowania elementu w tekście. Do wyśrodkowania służy margin: 0 auto; Float może być wykorzystywany do:

• Tworzenia opływającego grafikę tekstu
• Układania list poziomo
• Tworzenia kolumn
• Wstawienia inicjału, dużej litery na początku tekstu

Wartości, które przyjmuje:

• left
• right
• none – wartość domyślna dla wszystkich elementów

Zapobieganie opływaniu

Aby spowodować wyświetlenie elementu poniżej obiektu z float należy nadać mu wartość clear. Poniższe przykłady pokazują zachowanie się elementów, mających różną wartość float:

Przykład 1

Przykład 2

Ciekawe zachowanie można zaobserwować w przykładzie 1. Element z float zostaje wyjęty z normalnego biegu dokumentu. W przykładzie 2, właściwość clear taki bieg ponownie przywołuje.

Clear może przyjmować wartości:

• left
• right
• both
• none – wartość domyślna dla wszystkich elementów

Element może mieć również obie wartości clear i float, wtedy będzie „pływał” poniżej innych floatów

Obiekt w obiekcie i overflow

Jeśli element, który zawiera elementy pływające ma właściwość overflow z wartością inną niż visible to zachowuje się tak jakby jego dolna krawędź miała clear:both;

Przykład 3

Przykład 4

Przykład 5

Przykład 3 ilustruje prawidłowe wykorzystanie overflow, tak aby dwa pływające obiekty mieściły się w głównym boksie, a dodatkowy tekst znajdował się pod nim

Przykład 4 pokazuje, że dodanie float do elementu zawierającego w sobie obiekty z float powoduje zawarcie tych elementów wewnątrz obiektu nadrzędnego. Niestety dodatkowy tekst będzie opływać tenże obiekt z prawej strony. Można ten efekt zniwelować poprzez dodanie przed dodatkowym tekstem elementu:

Przykład 5 to sytuacja, w której elementy „pływające” nie zawierają się w elemencie nadrzędnym, dodatkowy tekst opływa elementy wewnętrzne.

Oczywiście nie są to wszystkie metody rozwiązywania problemu z opływaniem. Ciekawym, nowoczensym i wartym uwagi jest sposób z wykorzystaniem właściwości :after. Metoda jest szerzej opisana w linku numer 1.

Linki

Dodatkowe informacje o elementach pływających można znaleźć pod następującymi adresami: 1. http://www.complexspiral.com/publications/containing-floats/ 2. http://www.positioniseverything.net/easyclearing.html