poniedziałek, 2020-11-30

Style inline

Najbardziej bezpośrednim sposobem nadania stylu CSS dla elementu jest wpisanie go w atrybut style. Technika ta jest różnie nazywana: styl inline, liniowy, lokalny itp.

Przykład nr 1

<p style="color: #fff;">Akapit 1</p>
<p style="color: #fff;font-size: 20px;">Akapit 2</p>

Dwa akapity otrzymały niebieski kolor, jeden z nich ma trochę większe litery. W przypadku drugiego akapitu widać, że w stylach inline można umieścić wiele własności, oddzielamy je średnikiem. W prezentowanym przykładzie widać jedną z wad stylów inline, jaką jest powielanie kodu. Obydwa elementy mają dokładnie taką samą deklarację koloru. Stwierdzenie powielania kodu powinno być impulsem do przeprowadzenia weryfikacji, czy czegoś nie można zrobić lepiej.

Przykład nr 2

<div style="color: #007;">
<p>Akapit 1</p>
<p style="font-size: 20px;">Akapit 2</p>
</div>

Do kodu wprowadzono poprawkę, dzięki dodaniu elementu nadrzędnego i skorzystaniu z mechanizmu dziedziczenia stylów deklaracja koloru występuje tylko w jednym miejscu. Niestety jeden z elementów ma różnić się rozmiarem liter i w jego przypadku nie można zlikwidować całkowicie atrybutu style. Kod drugiego przykładu zajmuje jeden znak więcej niż poprzednie rozwiązanie, jednak jest to krok w dobrą stronę, bo „wspólnych” właściwości może być więcej, może także zwiększyć się liczba elementów, łatwiej też dokonać ewentualnej modyfikacji własności. W przypadku bardziej rozbudowanej niż w demonstrowanych przykładach struktury, a taką będzie standardowa typowa strona internetowa, stosując wyłącznie style inline bardzo trudno będzie uniknąć powielania kodu CSS, a raczej na pewno nie da się tego zrobić.

Kilka wad stylów inline

• prawdopodobne powielanie kodu;
• większa objętość kodu w porównaniu do innych rozwiązań;
• w przypadku potrzeby modyfikacji witryny składającej się z wielu stron wszelkie modyfikacje będą kłopotliwe i pracochłonne;
• nie ma możliwości stosowania selektorów, co wydatnie wpływa na poprzednie punkty;
• mieszanie kodu HTML i CSS zmniejsza ich czytelność;
• brak niektórych możliwości, np. definiowania pseudoklas itp.

Kiedy stosowanie stylów inline ma sens?

Style inline (oraz tabele stosowane w celu zapewnienia pożądanego układu elementów itp. przestarzałe rozwiązania) będą najbezpieczniejszym rozwiązanie w przypadku szablonów wiadomości e-mail w formacie HTML. Wiele systemów Webmail blokuje osadzone style CSS, aby uniknąć możliwości ich wpływu na macierzysty interfejs. Najczęściej ze względów bezpieczeństwa dotyczy to też dołączanych zewnętrznych plików. Mnogość aplikacji typu webmail oraz klientów poczty uniemożliwia dokonanie testów wszystkich możliwości.

Wady stylów inline trochę mniej będą dawać się we znaki w przypadku stron składających się tylko z jednego dokumentu, a także w przypadku np. dokumentacji użytkownika generowanej automatycznie w formie plików HTML i używanej lokalnie na jego komputerze. Czasami w przypadku poprawek, zwłaszcza w przypadku nieznanego kodu tworzonego przez inne podmioty, szybciej można opracować rozwiązanie problemu za pomocą stylów inline, a następnie przenieść je do właściwych plików i zająć się zawiłymi zależnościami dotyczącymi dziedziczenia, kaskadowości i specyficzności selektorów.

W przypadku standardowych zastosowań CSS style inline nie są dobrym rozwiązaniem.