Optymalizacja CSS – znaczniki i atrybuty
Przed rozpoczęciem optymalizacji kodu CSS należy sprawdzić, czy na stronie wewnątrz kodu HTML nie zawarto kodu CSS. Zgodnie z zaleceniem organizacji standaryzującej W3C należy oddzielić warstwę prezentacyjną (CSS) od warstwy danych (HTML). W kodzie stron WWW często występuje pomieszanie obu tych warstw. Zdeprecjonowane znaczniki HTML (tabela poniżej) dotyczące wyglądu należy zastąpić stylami CSS, które trzeba umieścić w zewnętrznym pliku.
| Nazwa elementu | Działanie | Zamiennik CSS |
| BASEFONT | Atrybuty czcionki bazowej | color, font-family,
font-size |
| BLINK | Migotanie tekstu | text-decoration:blink; |
| CENTER | Wyśrodkowanie | text-align:center; |
| FONT | Atrybuty czcionki | color, font-family,
font-size |
| MARQUEE | Pływanie tekstu | BRAK, potrzebny skrypt JS |
| NOBR | Blokada łamania wiersza | white-space:nowrap; |
| S | Przekreślenie tekstu | text-decoration:line-through; |
| STRIKE | Przekreślenie tekstu | text-decoration:line-through; |
| U | Podkreślenie tekstu | text-decoration:underline; |
| WBR | Wskazuje miejsce do złamania tekstu | BRAK, stosuje się encje HTML ­ |
Na stronach internetowych (szczególnie tych starszych) często spotyka się atrybuty HTML, które odpowiadają za wygląd strony – je także należy zastąpić stylami CSS (tabela poniżej). Należy dążyć do tego, aby kod strony był możliwe krótki – wtedy strona będzie się szybko ładować. Wyszukiwarki premiują strony, na których tekst stanowi dużą część kodu strony.
| Atrybut | Działanie | Zamiennik |
| align | Wyrównanie | float, vertical-align |
| alink | Kolor naciskanych linków | :active |
| background | Tło obrazkowe | background-image |
| bgcolor | Kolor tła | background-color |
| border | Obramowanie | border-width |
| cellpadding | Margines wewnętrzny w komórce | border-collapse |
| cellspacing | Szerokość krawędzi komórek | border-spacing |
| clear | Czyszczenie powierzchni zajmowanej przez obiekty położone powyżej obiektu z atrybutem clear | clear |
| color | Kolor | color |
| compact | Lista bardziej zwarta | margin-top, margin-bottom, line-height |
| face | Rodzaj rodziny czcionek | font-family |
| height | Wysokość | height |
| hspace | Margines zewnętrzny w poziomie | margin-left, margin-right |
| link | Kolor linków | :link |
| noshade | Brak cienia | border-style |
| nowrap | Blokada przełamania tekstu | white-space:nowrap; |
| size | Rozmiar tekstu | font-size |
| start | Nowa wartość licznika | counter-reset |
| text | Kolor tekstu | color |
| type | Typ elementu | list-style-type |
| valign | Wyrównanie w pionie | vertical-align |
| value | Wartość elementu | counter-reset |
| vlink | Kolor odwiedzonych linków | :visited |
| vspace | Margines zewnętrzny w pionie | margin-top, margin-bottom |
| width | Szerokość | width |
Grzegorz Getka