Tag Archives: webdesign

CSS3 + Flexbox = Koniec z FLOAT’ami (kiedyś)

Zapostowany w Technika | Tagi: , , , , , , , | 5 Komentarzy

Biorąc pod uwagę tempo, z jakim aktualizowane ostatnio są najważniejsze przeglądarki (o zgrozo, nawet IE) wszystko wskazuje na to, że już za chwilę będzie można zacząć stosować większość dobrodziejstw CSS3 nawet w komercyjnych projektach.

Ale w natłoku tych wszystkich wyskakujących po Sieci demówek bajeranckich box-shadow‘ów, text-shadow‘ów, transitions czy nawet interaktywnych obiektów 3D, łatwo było przeoczyć nowość o wiele bardziej, w moim mniemaniu, fundamentalną — nowy rodzaj wyświetlania elementów.

display: box

Na początek małe demo. Koniecznie oglądać w jakimś Webkicie (Chrome, Safari czy nawet Android). Póki co, Opera kompletnie tego nie rozumie, IE aż po wersję 8 też (może M$ doda obsługę w wersji 9). Firefox niby sobie radzi, ale gubi się w wielu miejscach (co ciekawe – włącznie z wersją 4 beta – skutkiem czego w tym demie nie widać np. będzie faktu, że box jest skalowalny – co zasadniczo pozbawia sensu cały temat ;) ).

Powinno być widać coś takiego:

Na co warto zwrócić uwagę:

  • Nie ma tutaj żadnych floatów (!)
  • Równa wysokość niebieskich boxów jest dana „z automatu” – nie ma żadnych tricków CSS2.1 czy JS.
  • 3 niebieskie boxy są wyrównane w zielonym boksie do dołu — zielony box nie ma paddingu na górze!
  • Kolejność niebieskich boxów ustawiona jest w CSSie. W kodzie następują kolejno „child 1″, „child 2″ i „child 3″.
  • „child 1″ ma stałą szerokość, a „child 3″ i „child 2″ okupują pozostałą szerokość zielonego boxa w stosunku 3:1 (wszystko ustawione via CSS). Widać to dokładnie, kiedy ogląda sie demo w jakimś Webkicie i skaluje się okno przeglądarki.
  • Zielony box wycentrowany jest w przeglądarce w pionie i w poziomie – beż żadnych „margin:auto”, „position:absolute”, „left:50%;top:50%” czy ujemnych marginesów.

Ale jak?

Z wykorzystaniem kilku nowych, proponowanych w draftach (póki co, niestety) CSS3 atrybutów.

Zielony box (rodzic)

display:box
Nowa wartość display, która włącza model flexbox na elemencie, na którym jest ustawiona, i jego bezpośrednich dzieciach.
box-orient
Możliwe wartości: horizontal | vertical | inherit — definiuje jak wyświetlane są niebieskie boxy: horyzontalnie (tak jest ustawione w demie) czy wertykalnie.
box-pack
Możliwe wartości: start | end | center | justify — ustawia wyrównanie niebieskich boxów (dzieci) na osi zdefiniowanej przez wartość box-orient. Czyli jeśli w tym przypadku box-orient: horizontal, to chodzi o wyrówanie horyzontalne. Gdyby było box-orient: vertical, box-pack ustawiało by wyrównanie niebieskich boxów w pionie. Mała uwaga: na demie nie widać, że niebieskie boxy wyrównane tak naprawdę są do prawej, bo ze względu na ustawienie na dwóch z nich wartości box-flex — w sumie zajmują całą szerokość zielonego boxa.
box-align
Możliwe wartości: start | end | center | baseline | stretch. Odwrotność atrybutu box-pack — jeśli box-pack definiował wyrównanie horyzontalne, box-align będzie ustawiał wyrównanie wertykalne — i vice versa.

Niebieskie boxy (dzieci)

box-flex
Możliwe wartości: 0 | jakakolwiek liczba całkowita – ta wartość robi dwie rzeczy: włącza skalowalność boxa-dziecka i ustawia proporcje, w jakich dzieci (niebieskie boxy, w tym przypadku) będą wykorzystywały wolną przestrzeń w „rodzicu” (zielonym boksie). W demie 2 niebieskie boxy mają włączoną tą wartość: „child 3″ ma box-flex: 3, a „child 2″ ma box-flex: 1 — co oznacza, że oba będą skalowalne i będą wypełniały wolą przestrzeń w zielonym boksie (pozostałą po odjęciu szerokości „child 1″) w stosunku 3:1.
box-ordinal-group
Możliwe wartości: jakakolwiek liczba całkowita. Atrybut ten pozwala na zmianę kolejności wyświetlania boxów-dzieci (niebieskich) w stosunku do kolejności, jaką mają w kodzie. W demie boxy te mają kolejno: „child 1″ — box-ordinal-group: 3, „child 2″ — box-ordinal-group: 1 i „child 3″ — box-ordinal-group: 2

Co jeszcze

To oczywiście nie wszystkie wartości (polecam poczytać źródła), jakie składają się na flexbox. Ale to już wystarcza, żeby w pełni zastąpić floaty, a nawet dodać developerom wiele nowych możliwości bez konieczności uciekania się do hacków. Kiedy tylko wszystkie podstawowe przeglądarki zaczną spójnie to obsługiwać, rzecz jasna (patrzę głównie na Ciebie, Firefoksie). Na razie za wesoło nie jest. IMHO zaznaczenie tam Firefoxa na zielono też jest nieco na zasadzie „wishful thinking”.

Źródła

Update

Zapomniałem dodać, że wszystkie te właściwości są obecnie w fazie eksperymentalnej, w zw. z czym trzeba stosować „przedrostki producenckie”, czyli:

display: box;

display: -moz-box;
display: -khtml-box;

box-align: center;

-moz-box-align: center;
-khtml-box-align: center;

box-pack: center;

-moz-box-pack: center;
-khtml-box-pack: center;

…i tak dalej.

Kolejne zmiany

Zapostowany w Inne | Tagi: , , , , , , , , , | 3 Komentarzy

Po niespełna roku znowu postanowiłem trochę podłubać przy moim themie. Tym razem miałem kilka powodów:

  • Miałem trochę wolnego czasu,
  • WordPress 3.0 i nowy defaultowy theme twentyten — korciło mnie, żeby po raz pierwszy na nim poeksperymentować (sporą część stylów tekstowych zostawiłem właściwie niezmienioną),
  • CSS3 — jako że coraz więcej przeglądarek zaczyna sensownie to obsługiwać, czas był wielki nimi się pobawić,
  • Od dawna miałem zamiar wdrożyć sobie skin skalowalny,
  • Miałem zachciankę, żeby zmajstrować temat kompletnie pozbawiony grafiki dekoracyjnej.

To tyle :)

Kilka zmian

Zapostowany w Inne | Tagi: , , , , , , , , , | 2 Komentarzy

Od dłuższego czasu chciałem nieco mocniej wyróżnić najnowszy post na stronie głównej, ale jakoś nie bardzo mogłem się zebrać, żeby do tego przysiąść. Szczęśliwie ostatnimi dniami znalazłem nieco natchnienia i odpaliłem Photoshopa, a zaraz potem Notepada++ :D . Efekt nawet całkiem mi odpowiada (póki co).

Tym razem, dla odmiany, zapędziłem do roboty WordPressowe Custom Fields (do obrazka przy najnowszym poście). Czytaj dalej »

Ikony Tortoise SVN w Total Commander

Zapostowany w Technika | Tagi: , , , , , , , , , , , , | 4 Komentarzy

Od czasu do czasu każdy webdeveloper musi przynajmniej zetknąć się z jakąś formą wersjonowania kodu. Jednym z najpopularniejszych systemów służących do tego właśnie celu jest oczywiście Subversion (SVN).

Pod Windows najwygodniej z SVN (moim przynajmniej zdaniem) korzysta się przy pomocy klienta zwanego Tortoise SVN, który bardzo ładnie integruje się z shellem, dając w menu kontekstowym wszystkie potrzebne polecenia, a status plików pokazując przy pomocy nakładek na ikony. Czytaj dalej »

No nowego w WordPress 2.7

Zapostowany w Technika | Tagi: , , , , , , , , , | 1 Komentarz

Skusiłem się i zainstalowałem w końcu wesję RC WordPressa 2.7. Wśród najbardziej oczekiwanych zmian w tej wersji był kompletny redesign panelu administracyjnego, ktory – na pierwszy rzut oka – wygląda na bardzo udany.

Pierwszą i podstawową zmianą, z której jestem bardzo zadowolony, to wreszcie możliwość wykorzystania dużych panoramicznych monitorów w czasie pisania postów. Trzeba przyznać, że wąziutki edytor WYSIWYG w rozdzielczości 1920×1200 w poprzedniej wersji WP wyglądał po prostu żenująco. Tym razem jest juz znacznie lepiej – cały layout panelu administracyjnego wreszcie się skaluje w poziomie. Czytaj dalej »

Redesign!

Zapostowany w Inne | Tagi: , , , , , | 6 Komentarzy

Uff, wreszcie się udało. Redesign skończony :). Tym razem, poza oczywiście nową szatą, postanowiłem zmienić jeszcze kilka rzeczy.

Po pierwsze i najważniejsze – inna platforma. Zamieniłem Drupala na WordPressa. Doszedłem po prostu do wniosku, że do moich skromnych wymagań nie potrzeba aż takich możliwości, jakie daje D.

Ponadto znalazłem fajny plugin do galerii (NextGen Gallery), a i panel administracyjny WP jakoś bardziej zachęca mnie do postowania. Czytaj dalej »

IE6 wreszcie pod Vistą!

Zapostowany w Technika | Tagi: , , , , , , , , | 6 Komentarzy

Wygląda na to, że ktoś wreszcie znalazł sposób na testowanie stron na Viście w IE6 (ale również IE5.5, i IE8a1, poza standardowo wbudowanym IE7). Wprawdzie to wczesna alfa, ale wszystko wskazuje na to, że już teraz IETester może z powodzeniem być alternatywą dla ociężałego podejścia M$ (VPC + obraz XP).

via Wykop