display: inline-block w IE7

Coraz częściej używam ostatnio właściwości inline-block zamiast float, np. do tworzenia poziomych menu, czy paginacji. Po co wo ogóle inline-block, skoro float doskonale się sprawdza? A chociażby po to, żeby poziome menu, czy paginator wyśrodkować bez nadawania mu stałej szerokości, czyli wszędzie tam gdzie element generowany jest dynamicznie.

Webdesignerzy alergicznie reagują na tę właściwość chociaż jest dobrze wspierana we wszystkich przeglądarkach, nawet w Internet Explorer 7… tylko trzeba mu odrobinę pomóc ;). inline-block działa w IE7, z tym że działa jedynie dla elementów, które domyślnie są elementami liniowymi. Dla elementów blokowych trzeba zastosować sztuczkę w postaci:

.element {
	display: inline-block;
}
.ie7 .element {
	zoom: 1;
	display: inline;
}

To wszystko!

PS. Niech was nie zmyli klasa .ie7, to nie jest element hacku. Odsyłam do wpisu na temat komentarzy warunkowych dla Internet Explorer. Podobno w IE6 też działa, z tym że dla IE6 elementowi trzeba nadać dodatkowo height. Ale kto by się IE6 przejmował…
(więcej…)

CSS3 PIE i WordPress

Przygotowując kolejny wpis (który mam nadzieję uda mi się niebawem opublikować) na temat poprawek dla Internet Explorera i emulacji niektórych własności CSS3 natknąłem się na problem integracji popularnego skryptu CSS3 PIE z WordPressem. Pojawiły się dwa problemy:

  • Po pierwsze w arkuszy CSS należy podać bezwzględną ścieżkę do pliku *.htc,
  • po drugie IE wymaga aby pliki *.htc serwowane były z odpowiednim nagłówkiem.

Rozwiązanie jest bardzo proste. Do katalogu, w którym trzymamy skrypty (w przykładzie jest to katalog /lib w głównym katalogu motywu) wrzucamy plik PIE.htc oraz plik PIE.php, następnie do pliku functions.php korzystając z WordPressowych akcji dodajemy:

function css3_pie() {
    echo '<style type="text/css">
             .iefix { behavior: url('.get_bloginfo('template_url').'/lib/PIE.php);}  
          </style>';
}
 
add_action('wp_head', 'css3_pie');

Dzięki temu serwujemy odpowiedni nagłówek (header( ‘Content-type: text/x-component’ )) oraz podajemy odpowiednią ścieżkę do pliku PIE.htc. W przykładzie powyżej skrypt zostanie zaaplikowany dla elementów posiadających klasę .iefix. Plik PIE.php znajdziemy w archiwum ze skryptem CSS3 PIE.

Oczywiście rozwiązanie dotyczy nie tylko CSS3 PIE, ale wszystkich fixów dla IE korzystających z właściwości behavior do aplikowania skryptów z poprawkami. Dodatkowo wpis możemy wrzucić w komentarz warunkowy, tak żeby był widoczny wyłącznie dla IE starszych niż 9.0.

Internet Explorer jaki jest każdy widzi, czyli jak radzić sobie z IE w dobie CSS3 i HTML5 cz. 2 — filtry DX

Opublikowano: przez wb 4 Komentarzy

Poprzedni wpis z cyklu Internet Explorer jaki jest każdy widzi… poświęcony był wykrywaniu IE i jego wersji i podjęciu podstawowych działań w celu zapewnienia kompatybilności. Tym razem zajmiemy się, przynajmniej częściową naprawą niektórych niedoskonałości (delikatnie ujmując) IE. (więcej…)

Komentarze warunkowe – robisz to źle!

Opublikowano: przez wb 9 Komentarzy

O komentarzach warunkowych pisałem w poprzednim wpisie. Na wielu blogach w sieci autorzy rozpisują się na ten temat podając przeróżne przykłady jak używać komentarzy dla IE. Sprawa z pozoru prosta i nie pozostawiająca już pola do kolejnych publikacji na ten temat. Przeglądając jednak fora spotykam się bardzo często z niezbyt efektywną metodą wprowadzania poprawek dla IE (więcej…)

Internet Explorer jaki jest każdy widzi, czyli jak radzić sobie z IE w dobie CSS3 i HTML5 cz.1 — identyfikacja problemu

IE jaki jest każdy widzi… no prawie każdy. Użytkownicy IE zdają się tego nie zauważać. Niestety ich odsetek nadal jest na tyle duży, że w projektach skierowanych do masowego odbiorcy nie można sobie pozwolić na ignorowanie tej nieszczęsnej (a może nawet nieszczęśliwej?) grupy użytkowników internetu. Ten wpis, jeśli dobrze pójdzie rozpoczyna serię wpisów na temat typowych problemów i wyzwań jakie stwarzają przeglądarki z rodziny IE. Pierwsza część, czyli ta, którą właśnie czytasz poświęcona będzie identyfikacji problemu, a więc detekcji wersji przeglądarki i podjęciu podstawowych kroków w celu obejścia niedoskonałości IE.
(więcej…)

Walki z @font-face ciąg dalszy

W poprzednim wpisie narzekałem na brzydkie renderowanie fontów przez Google Chrome. Udało mi się ten problem obejść serwując dla Chrome fonty w formacie SVG. Fonty w SVG renderują się już całkiem przyzwoicie. Niestety radość nie trwała długo. Przy okazji testowania @font-face znalazłem kolejny problem, który występuje wyłącznie w Chrome.

Problem wygląda tak:
 (więcej…)

Rzecz o fontach, czyli moja przegrana walka z @font-face

Rozpoczynając poszukiwania związane z zamieszczaniem własnych czcionek na stronie (a w zasadzie to fontów, bo czcionki to Gutenberg odlewał ;)) można trafić na wiele artykułów i poradników bardzo optymistycznie przedstawiających @font-face. Sam z resztą z początku też byłem bardzo entuzjastycznie nastawiony. W sieci jest mnóstwo narzędzi do konwersji fontów, m.in doskonały Font Squirrel, pozwalający na konwersję TTF do różnych formatów (WOFF, SVG, EOT) z mnóstwem dodatkowych opcji. Niezłą bazę daje nam też Google ze swoim Google Web Fonts (niestety nadal niewiele z nich posiada polskie ogonki). Co ciekawe @font-face jest obsługiwane nawet przez antyczne wersje Internet Explorera, nie miałem okazji sprawdzić, ale dokumentacja na MSDN zapewnia, że już od wersji 5.5! Co prawda IE poniżej wersji 9.0 wymaga konwersji do własnego (a jakże by inaczej) formatu EOT. Nie zmienia to faktu, że z powodzeniem można używać @font-face w IE od ponad 10 lat.

W czym w takim razie jest problem? Skoro wszystkie nowoczesne przeglądarki, a także IE w starych wersjach bez problemu obsługuje definicję @font-face (więcej…)

Start!

Zakładając bloga wypada coś napisać. Prawdopodobnie nikt tego nie przeczyta, ale gdyby przypadkiem ten blog stał się Smashing Magazine polskiego internetu, to wypada dopełnić formalności ;)

Zamierzam pisać tutaj o tematach związanych z web designem, a więc mówiąc po naszemu projektowaniem stron internetowych i tematach pokrewnych. Planuję zarówno luźniejsze wpisy, głównie związane z CSS (na początek prawdopodobnie coś z zakresu rozwiązań cross-browser), jak również krótkie poradniki dla początkujących.