Optymalizacja CSS – kompresja to nie wszystko

 

Kompresja i optymalizacja kodu cssZ punktu widzenia programisty krytycznym zasobem jest czas procesora. Dlatego badamy złożoność stosowanych algorytmów i wybieramy najlepszy. Czyli ten, który przy jak najmniejszej liczbie operacji realizuje określone zadanie. Na pewno? A inne kryteria?

Tworząc aplikacje internetowe, w tym także strony, konieczne jest także optymalizowanie kodu pod względem wykorzystania łącza. To oznacza jak najmniejszą ilość wywołań HTTP, szczególnie POST i GET. To oznacza jak najmniejsze pakiety danych. Zużycie czasu procesora w tym kontekście ma niewielkie znaczenie.

Jak najprościej, bez refaktoryzacji kodu, zoptymalizować utworzoną przez nas stronę? Kompresja plików źródłowych! Kompresory usuwają niepotrzebne znaki takie jak spacje, komentarze itp. Kod staje się nieczytelny, ale dzięki temu zmniejszamy rozmiar pliku. Dla szablonu bloga kissdesign.pl, kompresja pliku styles.css przyniosła 10-procentowy zysk.

Spróbuj sam! Użyj darmowego kompresora i optymalizatora css on-line.

Dlaczego piszę o optymalizacji? W przypadku plików CSS nierzadko powielamy reguły, które mogą zostać zapisane jedną. Podobnie ze stosowaniem skrótów.

Przed kompresją i optymalizacją:


body{
   text-align: left;
}

p{
   text-align: left;
   margin-bottom: 2em;
   margin-top: 1em;
}

Po kompresji i optymalizacji (pozostawiłem przejście do następnej linii dla czytelności):


body,p{text-align:left}
p{margin-bottom:2em;margin-top:1em}

Podobnie można kompresować kod html, javascript. Nie mówiąc o kompresji obrazów! Ale to już temat na inny wpis…

Skorzystałeś z optymalizacji kodu? Podziel się wynikiem, czy zysk był wart tych dwóch kliknięć? ;-)

 
 

Hack na @font-face – dowolna czcionka na stronie

 

100% @font-face -  dowolna czcionka na stronieMagia @font-face opisana  przeze mnie wymaga małego sprostowania. Wszystko wynika z faktu, iż różne przeglądarki akceptują różne formaty czcionek, linkowanych za pomocą @font-face.

Firefox i Chrome doskonale radzą sobie z formatem .ttf, natomiast Internet Explorer teoretycznie wspiera .eot. Jak w takim razie zapewnić spójną typografię na naszej stronie? Komentarze warunkowe mogą rozwiązać problem. Z tym, że to nieeleganckie rozwiązanie i należy je stosować w ostateczności.

Chcecie gotowca? Oto i on w całej okazałości:


@font-face {
  font-family: 'KISS design';
  src: url('Kissdesign.eot');
  src: local('KISS design Regular'), local('KISS design'),
         url('Kissdesign.otf') format('opentype');
}

Odrobina komentarza. Po pierwsze potrzebujemy w takim razie czcionki w dwóch formatach - .eot i .otf/.ttf. Z pewnością przyda Ci się doskonały i darmowy konwerter formatów czcionek opisany przeze mnie.

Po drugie, jeżeli przeglądarka znajdzie czcionkę o nazwie „KISS design Regular” na dysku lokalnym, zostanie ona użyta. Niesie to niewielkie ryzyko, że użytkownik będzie miał na swoim komputerze zupełnie inną czcionkę, zapisaną pod użytą przez nas nazwą. Warto mieć to na uwadze. Jeżeli jednak użytkownik nie posiada lokalnie żądanej czcionki, przeglądarka pobierze ją z serwera – „Kissdesign.otf”.

Po co w takim razie linkowanie „Kissdesign.eot”? Dla ukochanego IE. Internet Explorer zignoruje drugie wystąpienie „src: (…)”, ponieważ nie rozumie znaczenia klauzul local i format.

Jeżeli chcesz zgłębić ten temat, polecam wpis Bulletproof @font-face na blogu Paula Irisha.

 
 

Uwaga – nowe okno! Ikona przy linku _blank

 

Ikona przy linku otwierającym nowe okno przeglądarki

Linki otwierające się w nowych oknach z przyczyny znanej jedynie autorowi strony irytują szarego internetowego szperacza. Niekiedy jednak warto, czasami wręcz trzeba użyć feralnego atrybutu <a target=”_blank„>link</a>.

Szczególnie gdy mamy do czynienia z listą zewnętrznych źródeł w artykule czy wskazujemy adres do strony, która będzie prawdopodobnie równolegle wykorzystywana z docelową. Do tej drugiej kategorii można zaliczyć wszystkie strony z materiałami do pobrania, strony aplikacji internetowych itp.

Co jednak zrobić, by pasek irytacji czytelnika nie przekroczył maksimum po kilku linkach otwierających nowe okno? Wystarczy go poinformować o takich linkach za pomocą dodatkowej ikony przy odnośniku.

Zobacz eleganckie i za razem funkcjonalne rozwiązanie oznaczenia linków _blank.

Gotowy kod poniżej. Ikona open.png do pobrania.

a[target="_blank"],
a[target="new"]{
   padding-right:14px;  /* szerokość ikony z marginesem */
   background: url(open.png) right top no-repeat;
} 

Przydał Ci się ten post? Wykorzystałeś przykład na swojej stronie? Napisz o tym w komentarzu! :-)

 
 

Uwolnić czcionki – dowolny font na stronie

 

Najnowsze przeglądarki już wspierają właściwość @font-face, która pozwala na podlinkowanie dowolnej czcionki. Następnie można jej użyć pod wybraną przez siebie nazwą. Zobacz jakie to proste:

@font-face {

font-family:"Times New Polkowski";

src: url(../resources/fonts/tnpolkowski.otf);

}

p{ font-family: "Times New Polkowski", Georgia, Times; }

Ok, to nie jest takie proste. Jeszcze. Nie został rozwiązany problem formatów czcionek – każda platforma i system operacyjny preferuje inny format. Do tego trzeba uważnie czytać umowy licencyjne fontów – najczęściej nie pozwalają one na wykorzystywanie w taki sposób (co sprytniejszy użytkownik może pobrać udostępnioną przez nas czcionkę).

Mimo to @font-face jest kuszącą perspektywą, która pozwoliłaby odesłać w niepamięć techniki podmiany tekstu obrazem. A to znaczy ogromną oszczędność czasu!

Podziel się ze mną opinią – czy ten wpis był przydatny?

 
 
« poprzednie wpisynastępne wpisy »