Od czasu do czasu nie mamy możliwości całkowitego zignorowania IE6 i zmuszeni jesteśmy do modyfikacji naszego dzieła. Kolejną niedziałającą właściwością CSS, z którą IE6 sobie nie radzi jest position: inline-block. Ten typ wyświetlania elementu jest bardzo pomocy w wielu przypadkach i często zastępuje float. Powoduje, że element wyświetlany jest jak liniowy, jednocześnie zachowując się jak element blokowy (można ustawić mu marginesy, wysokość, itd.). Niestety, jak już wspomniałem, IE6 nie radzi sobie z tym elementem. Okazuje się, że istnieje prosty fix, który można zastosować, aby inline-block działał poprawnie. Zaprezentuję to na przykładzie paginacji.

<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
</ul>

W normalnej przeglądarce zadziałałoby to:

ul {
	text-align: center;
	border: 1px solid #7e7e7e;
}

li {
	display: inline-block;
}

li a {
	display: block;
	border: 1px solid #dbdbdb;
	margin: 10px 0;
	padding: 10px;
}

Ale nie w IE6. Na szczęście fix jest bardzo prosty i nie wymaga od nas wielkiego wysiłku. Wystarczy zmienić li na display: inline, a znacznik a na display: inline-block;

Ostatecznie CSS wygląda następująco.

ul {
	text-align: center;
	border: 1px solid #7e7e7e;
}

li {
	display: inline;
}

li a {
	display: inline-block;
	border: 1px solid #dbdbdb;
	margin: 10px 0;
	padding: 10px;
}

W serii Linkdump dawno nie poruszałem tematyki języka CSS [ostatni wpis na ten temat to #41] i związanych z nim narzędzi, problemów i innych tego typu rzeczy. Niniejszym naprawiam ten ewidentny błąd, dlatego po raz kolejny zapraszam do przejrzenia tego, co dla Was przygotowałem.   Fotografia: mauricesway, CC-BY. Linkdump #56: C.S.S. Better “CSS3 ticket-like tags”. [...]

Zastanawialiście się kiedyś jak działają przeglądarki internetowe? Tali Garsiel, izraelska programistka była zainteresowana znalezieniem odpowiedzi na to pytanie do tego stopnia, iż wzięła na warsztat Firefoxa, Chrome’a oraz Safari (czyli około połowy rynku przeglądarek). Wspomniana programistka zaczęła od lektury specyfikacji technicznych, a skończyła na czytaniu kodu źródłowego. Swoją pracę podsumowała w następujący sposób:

(…)it’s a good time to take a peek under the engine’s hood and see what’s inside a web browser. Well, what’s inside are millions of C++ lines…

Co znajdziemy w wynikach opracowanych przez Tali? Wszystko – cały proces renderowania strony został rozłożony na czynniki pierwsze i dokładnie opisany. Przeczytamy m.in o sposobie parsowania kodu HTML i CSS, budowaniu drzewa DOM, czy modelu pudełkowym (box model).

Wynik prac można znaleźć pod adresm http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/. Lektura obowiązkowa dla wszystkich osób, które na co dzień mają do czynienia z HTML.

Dzisiejszym wpisem rozpoczynam serię, w której będę się dzielił z Wami odkryciami, publikowanymi przeze mnie na Twitterze. Dzisiaj skupię się na CSS.

1. One line CSS Grid Framework – ile można zmieścić w jednym wierszu? Okazuje się, że bardzo wiele. Najlepszym przykładem jest tutaj One line CSS Grid Framework, który przy pomocy kilkudziesięciu znaków pozwoli zbudować wielokolumnowy layout.
2. Compass – framework CSS rozszerzający możliwości Sass o predefiniowane mixin dostarczające gotowe rozwiązania dla typografii, stylowania elementów strony, restowania CSS.
3. CSS3 Transitions Without Using :hover – efekty przejść zastosowane dla innych niż :hover pseudo-klas. Dużo kodu, a do każdego demo.
4. The future of CSS layouts – głębokie spojrzenie na layouty tworzone przy użyciu CSS. Wiele przykładów opisujących takie możliwości CSS jak flexbox, grid, pozycjonowane floaty czy regiony.
5. CSS3 Bling in the Real World – artykuł o CSS3, przyszłości tej technologii, jej możliwościach oraz stanie bieżącym.

Ten Linkdump jest zdecydowanie spóźniony - to chyba pierwszy wpis, z którym "nie wyrobiłem" się w ciągu dwóch dni względem Harmonogramu. Tak to jednak jest, jak się ma tyle pracy, że po tych kilkunastu godzinach człowiek już nawet nie myśli o tym, że gdzieś w Internecie istnieje jakaś strona, którą się zarządza, a tym bardziej, [...]

Poznawanie nowych technologii ma to do siebie, że oprócz podstawowej technologii, poznaje się technologie poboczne. Takim efektem ubocznym w przypadku Railsów, jest Sass – metajęzyk zbudowany w oparciu o CSS, maksymalnie upraszczający tworzenie warstwy prezentacji. Ponieważ Sass został stworzony na bazie CSS, każdy, kto choć trochę zna kaskadowe arkusze stylów, bez trudu go opanuje.

Co takiego posiada Sass, czego nie ma w CSS? Wbrew pozorom jest tego dużo. Zacznijmy od zagnieżdżeń.

#element {
  color: #ff0000;

  a {
    text-decoration: none;
  }
}

O ile powyższy przykład zagnieżdżania kodu na kolana nie powala, to następny jest czymś, czego bardzo brakuje w CSS.

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

Powyższy kod spowoduje, że wszystkie znaczniki będą podkreślane tylko w momencie najechania na nie kursorem myszy. W przykładzie zastosowany został specjalny znak &, oznaczający odwołanie się do rodzica, w tym przypadku jest nim znacznik a.

Zagnieżdżanie selektorów, mimo iż pomocne, szału nie robi. Na szczęście Sass posiada o wiele większe możliwości. Kolejną potrzebną funkcjonalnością są zmienne. Pozwalają one na przechowywanie wartości, którą później można użyć w wielu elementach. Jeśli zajdzie potrzeba modyfikacji tej wartości, wówczas zamiast przeszukiwać wszystkie pliki w jej poszukiwaniu, wystarczy zmienić jedną zmienną. Najlepszym przykładem będzie tutaj kolor.

$kolor: #dbdbdb;

a {
  color: $kolor;
}

p {
  color: $kolor;
}

Kolejną ciekawą funkcjonalnością Sass są mixin, pozwalające na wielokrotne wykorzystanie tego samego kodu. Najlepszym przykładem zastosowania mixin są właściwości wymagające dodania prefiksu przez nazwą, np border-radius. Zamiast za każdym razem powtarzać ten sam kod, wystarczy zdefiniować mixin, a następnie dodać ją do selektora. Twórcy Sass byli na tyle przewidujący, że dodali do mixin możliwość definiowania wartości, które można przekazywać do mixin w postaci argumentów. Co więcej, argumenty te mogą posiadać domyślne wartości, dzięki czemu stają się jeszcze bardziej uniwersalne.

@mixin border-radius($radius: 5px) {
    border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

Teraz wystarczy tylko dołączyć mixin do selektora przy pomocy dyrektywy @include.

#jakis_element {
    @include border-radius;
}

#inny_element {
    @include border-radius(10px);
}

Na koniec pozostawiłem tzw. wisienkę na torcie. Jest nią możliwość podzielenia pliku Sass na mniejsze pliki, odwzorowujące fragmenty strony, za które odpowiadają. Ponadto możemy przenieść wszystkie zmienne i mixin do osobnego pliku, dzięki czemu nie będziemy musieli ich szukać. Następnie wystarczy utworzyć plik, w którym dołączymy wszystkie niezbędne pliki, a Sass połączy je w jeden plik.

@import "zmienne.scss";
@import "naglowek.scss";
@import "tresc.scss";
@import "stopka.scss";

Wiemy już z grubsza jakie możliwości oferuje Sass, pora dowiedzieć się jak z niego skorzystać. Przede wszystkim będziemy potrzebować Ruby’ego. Jeśli nie mamy go zainstalowanego, możemy posłużyć się instalatorem, który znajdziemy na stronie http://rubyinstaller.org/downloads/. Użytkownicy “nieokienek” prawdopodobnie mają już go zainstalowanego.

Instalacja jest banalna i sprowadza się do zainstalowania gema:

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Od długiego już czasu CSS oferuje funkcjonalność noszącą nazwę pseudo-elementy. Niestety w czasach gdy na desktopach królował IE, a urządzenia mobilne kojarzyły się głównie z Nokią, pseudo-elementy nie miały racji bytu ze względu na niewielki odsetek użytkowników, którzy zauważyliby ich obecność. Od tamtego czasu minęło dobrych kilka lat, udział IE6 oraz IE7 w rynku mocno się skurczył, Microsoft wydał dobrą przeglądarkę IE9 i pracuje nad IE10, a urządzenia mobilne (wyposażone w nowoczesne przeglądarki) coraz częściej wykorzystywane są do przeglądania stron. Mając tak przyjazny ekosystem, możemy bez obaw stosować pseudo-elementy, z których najciekawszymi niewątpliwie są :before oraz :after.

Co w nich takiego wyjątkowego? Dzięki nim możemy do dowolnego elementu na stronie dodać dwa elementy potomne występujące bezpośrednio przed i po treści znajdującej się we wskazanym elemencie. W ten sposób unikniemy dziesiątek pomocniczych div-ów i span-ów zaśmiecających nasz kod. Zanim przejdziemy do kodu, warto dowiedzieć się gdzie wspomniane pseudo-elementy mogą być pomocne.

1. Pojemniki na niewielkie grafiki występujące np. przy linkach (pobierz w wersji PDF + ikonka). Dodanie pseudo-elementu pozwala usunąć zbędny element, w którym osadzona jest grafika (przy założeniu, że korzystamy ze sprite’ów).
2. Nadanie dodatkowego obramowania wokół jakiegoś elementu.
3. Dodanie “fikuśnych” cudzysłowów do cytowanego tekstu.
4. Możliwość utworzenia wielowarstwowego tła.
5. Możliwość tworzenia prostych grafik tylko przy pomocy CSS.

Nie są to oczywiście wszystkie możliwe zastosowania :before i :after. Jestem pewien, że moglibyście po chwili zastanowienia podać kilka kolejnych.

Przejdźmy do kodu. Najprostsze zastosowanie :before i :after sprowadza się do wskazania treści, jaka pojawi się przed i po wskazanym elemencie.

<div id="element">
    Lorem ipsum
</div>

#element:before {
    content: '"';
}

#element:after {
    content: '"';
}

W ten oto prosty sposób dodaliśmy do wskazanego elementu cudzysłów otwierający oraz zamykający. O wiele lepszym pomysłem jest dodanie tych znaków w treści, jednak powyższy przykład miał jedynie na celu zaprezentowanie sposobu działania.

Ważne jest aby wiedzieć, iż pseudo-elementy, są – jak ich nazwa wskazuje – pseudo elementami, elementami oszukanymi, których próżno szukać w drzewie DOM. Elementy te nie są widoczne w źródle strony. Doskonale to widać (a właściwie nie widać) w Firebugu, który nie jest nawet w stanie wykryć, że dany element wykorzystuje pseudo-elementy. O wiele lepiej radzi sobie z tym Chrome oraz IE9 i narzędzia deweloperskie wbudowane w te przeglądarki.

Kolejną ważną informacją jaką należy zapamiętać jest to, że pseudo-elementy :before i :after nie otaczają wskazanego elementu, lecz w nim się zawierają, otaczając jego zawartość. Doskonale zobrazuje to kolejny przykład.

#element {
    border: 1px solid red;
    padding: 20px;
}

#element:before {
    content: 'przed';
    border: 1px solid red;
    padding: 10px;
}

#element:after {
    content: 'po';
    border: 1px solid red;
    padding: 10px;
}

W efekcie uzyskamy coś takiego.

Ostatnią niezbędną do pracy z :before i :after informacją jest to, iż oba pseudo-elementy zachowują się jak elementy inline umieszczone przed i po treści. Oznacza to, że w przypadku zmiany ich wyświetlania na blokowe, treść “wyląduje” między nimi ale w pionie. Co więcej, blokowy pseudo-element spowoduje rozciągnięcie elementu, do którego jest dodany.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...