Wpis z serii – „jak proste pomysły ułatwiają codzienna pracę”:). Ile razy zdarzała się Wam sytuacja, że przychodził czas na stworzenie frontendu aplikacji (mam tutaj na myśli głównie HTML + CSS), ale grafik spóźniał się z dostarczeniem wymaganych plików? Mi często. A jednak podczas stylowania w brakujące miejsca trzeba „coś” wstawić – często jest to wymagane do prawidłowego ułożenia elementów strony. Jakie mamy rozwiązania?

Możemy:

• w stylach CSS ustawić na sztywno wymagane wymiary dla danego elementu, jednak wtedy zaśmiecamy niepotrzebnie arkusze stylów, które i tak będzie trzeba wyczyścić z nieporzebnych definicji. Nie możemy także w łatwy sposób ustawić tekstu takiego elementu z poziomu arkusza.
• narysować na szybko jakiś obrazek w prostym edytorze i korzystać z niego – wtedy jednak ląduje on w systemie kontroli wersji, skąd będzie trzeba go później usunąć
• znaleźć mniej więcej pasującą grafikę w sieci korzystając z wyszukiwarki – wymaga to jednak za każdym razem wpisania frazy, wybrania grafiki, skopiowania jej adresu i wklejenia do CSS albo <img src>.
• skorzystać ze specjalnych serwisów przeznaczonych do tworzenia takich obrazków – i to właśnie moim zdaniem jest najlepsza opcja :)

Mi osobiście znane są 3 serwisy oferujące tego typu usługę – totalnie za darmo:

• tempimag.es
• DummyImage.com
• Placehold.it

Jak używać?

Użycie tego typu serwisów jest bardzo proste. Zademonstruję ich działanie na przykładzie mojego faworyta, czyli DummyImage.com. Jedyne co musimy zrobić, to w źródle elementu/stylach podać odpowiednio spreparowany url, np: http://dummyimage.com/300x100/150/fff&text=Site+logo. Przykłady:

<img src="http://dummyimage.com/300x100/150/fff&text=Site+logo" width="300" height="100" alt="Site logo">

bądź

#logo {
    text-indent: -9999px;
    display: block;
    width: 300px;
    height: 100px;
    background: transparent url(http://dummyimage.com/300x100/150/fff&text=Site+logo) no-repeat 0 0;
}

A przykładowy efekt dla urla http://dummyimage.com/510x313/000/fff poniżej:

Przyjrzyjmy się, co wchodzi w skład takiego urla: http://dummyimage.com/[rozmiar obrazka]/[kolor tła]/[kolor tekstu]&text=[tekst - opcjonalny] W przypadku nie podania atrybutu text, wstawiony zostanie tekst opisujący rozmiar obrazka.

I to wszystko – nasza tymczasowa grafika jest gotowa :)

Zalety rozwiązania

Oto moim zdaniem 3 najważniejsze zalety takiego rozwiązania:

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

Zwiń
Czytaj na blogu autora...

Jakiś czas temu miałem wątpliwą przyjemność pracować nad projektem, w którym tło strony miało być niejednorodnym plikiem graficznym, którego w żaden sposób nie dało się powielić. Jedyne sposoby jakie mogłyby zapewnić taką funkcjonalność działały tylko połowicznie. Ostatnio natrafiłem na kolejny sposób, który wprawdzie zadziała tylko w nowoczesnych przeglądarkach, ale daje nadzieję na lepsze jutro.

Cała sztuczka polega na zastosowaniu jednej właściwości CSS3 – background-size. Właściwość ta spowoduje, iż plik graficzny ustawiony jako tło strony, będzie rozciągać się razem z oknem przeglądarki. Działające demo stosujące ten sposób znajduje się pod adresem http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php. Dokładny opis oraz inne sposoby na uzyskanie pożądanego efektu można znaleźć tutaj – http://css-tricks.com/perfect-full-page-background-image/.

Z czym kojarzą się okna modalne? Najczęściej z JavaScript zapakowanym w zgrabną bibliotekę. A co jeśli okna modalne można byłoby tworzyć tylko w CSS? Świat na pewno byłby piękniejszy.

Jak to możliwe, że CSS jest w stanie reagować na akcje użytkownika? Wszystko dzięki pseudo selektorowi :target, właściwości pointer-events oraz transformacjom i efektom przejścia.

Więcej informacji znajdziecie na stronie projektu http://www.paulrhayes.com/2011-03/css-modal/, a działające demo pod adresem http://www.paulrhayes.com/experiments/modal/. Okna modalne zadziałają we wszystkich najnowszych przeglądarkach, za wyjątkiem Opery oraz IE9.

Rosnąca popularność CSS3 spowodowała istny wysyp eksperymentów bazujących na tej technologii. Ostatnim eksperymentem na jaki natrafiłem jest Cezar – narzędzie służące do generowania prostych animacji CSS bazujących na efektach przejścia. Wystarczy, że wybierzemy (lub ustawimy własnoręcznie) rodzaj przejścia oraz czas trwania. Resztą zajmuje się CSS. Możemy nawet obejrzeć kilka różnych animacji działających z ustalonymi przez nas parametrami.

Projekt znajdziecie pod adresem http://matthewlein.com/ceaser/

Na rynku przeglądarek internetowych można wyróżnić „Wielką Piątkę” – należą do niej: Firefox, Opera, Safari, Chrome oraz Internet Explorer, vel Twoja Nowa ;). Każda z tych przeglądarek posiada tzw. zestaw narzędzi developerskich. Uważam, że śmiało można powiedzieć, że prawdziwy rozwój narzędzi tego typu rozpoczął się od rozszerzenia Firefoxa: Firebug – będącego do dzisiaj najbardziej popularnym narzędziem tego typu – dla niektórych wręcz niedoścignionym wzorem. Lecz nie o Firebugu będzie ten wpis, tylko o nowej wersji operowej ważki – Opera Dragonfly – zestawu narzędzi deweloperskich przeznaczonych dla tej norweskiej przeglądarki.

Instalacja

Słowo „instalacja” zostało tutaj użyte jako metafora, ponieważ nie musimy nic instalować (poza Operą oczywiście ;) bądź ściągać uaktualnień. Wystarczy w pasku przeglądarki wpisać opera:config#DeveloperTools|DeveloperToolsURL, a w podświetlonym polu podać następujący adres: https://dragonfly.opera.com/app/cutting-edge/. Po zapisaniu konfiguracji możemy już korzystać z nowej wersji narzędzia wybierając narzędzia deweloperskie z menu bądź korzystając ze skrótu klawiszowego Ctrl + Shift + I.

Wygląd

Znacznej poprawie uległ wygląd w porównaniu do poprzedniej wersji, co dobrze oddają poniższe screeny. Teraz Dragonfly przypomina WebInspectora z WebKita.

Stara wersja narzędzia Opera Dragonfly

Nowa wersja narzędzia Opera Dragonfly

Poszczególne opcje zostały zdecydowanie lepiej pogrupowane, otrzymały ikony, konsola pojawia się na półprzezroczystej warstwie – tak samo opcje. Wszystko wygląda schludniej i zdecydowanie łatwiej znaleźć to czego szukamy.

DOM

Dostajemy prawie wszystko, do czego zdążyliśmy przyzwyczaić się używając FireBuga. Czyli drzewo dokumentu, a z prawej strony wyliczone listę zastosowanych stylów (także w postaci obliczonej), właściwości elementu oraz jego układ. Dodatkowo w ostatniej wymienionej zakładce mamy listę elementów wyznaczających offset danego elementu.

Opera Dragonfly: Zakładka DOM i lista elementów wpływających na offset

Niestety, nie ma możliwości edycji parametrów elementu z poziomu zakładki Układ – możliwe jest to tylko z zakładki Style. Z ciekawostek – po kliknięciu prawym przyciskiem na nazwie właściwości CSS, jedna z opcji brzmi Specyfication for [nazwa właściwości. Po wybraniu tej opcji zostajemy przekierowani do dokładnego opisu danej właściwości na stronie W3C.

Opera Dragonfly: Zakładka DOM i widoczna opcja Specyfication for ...

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

Zwiń
Czytaj na blogu autora...

Kiedy natknąłem się na ten projekt, nie mogłem uwierzyć, że czysty CSS daje takie możliwości. Okazuje się, że przy odrobinie wysiłku możemy stworzyć “wykręcony” napis, a następnie pobrać kod HTML/CSS pozwalający na osadzenie tego napis na naszej stronie. Zero obrazków, zero JavaScrript, czysty CSS.

Oto próbka możliwości CSS3Wrap.

Więcej informacji na temat CSS3Wrap znajdziecie na stronie projektu – csswarp.eleqtriq.com

W weekend wookieb podesłał linka do interesującej biblioteki JavaScript – Modernizr. Dzięki niej wykrycie jakie funkcjonalności obsługuje nasza przeglądarka to pestka. Co więcej, nie napiszemy ani jednej linijki w JavaScript. Jedyne co musimy zrobić, to dodać bibliotekę do strony i… cieszyć się efektami. Modernizr na podstawie wykrytych funkcjonalności, do tagu HTML doda klasy CSS jednoznacznie opisujące czego możemy spodziewać się po przeglądarce. W pliku ze stylami możemy wykorzystać nowe klasy do zastosowania rozwiązań zapasowych. Prosty przykład:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Po więcej szczegółów odsyłam na stronę biblioteki – www.modernizr.com