Wiąże się to oczywiście z faktem, że póki co wspomniane właściwości CSS nie są jeszcze częścią oficjalnej, ostatecznej specyfikacji, dlatego póki co producenci przeglądarek w taki sposób sobie je „testują”. Ale jeśli ktoś chce z tych możliwości korzystać już dzisiaj, stoi przed nim spore wyzwanie związane z napisaniem kodu kompatybilnego ze wszystkimi aplikacjami. Można oczywiście pomagać sobie „ręcznie” — korzystając chociażby z http://caniuse.com/ .

Na szczęście pojawiła się niedawno webowa aplikacja http://prefixr.com – w której można wkleić fragment kodu sformatowanego tylko wg. oficjalnej propozycji specyfikacji, np:

body
{
  border-radius:5px;
}

A ona wypluje nam kod z wszystkimi wariantami dla popularnych przeglądarek

body {
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Fajne? Pewnie, że fajne. Ale „fajność” idzie znacznie dalej. Twórcy tej jakże użytecznej aplikacji udostępniają także API oraz przykłady wykorzystania go w różnych edytorach programistycznych. Niestety widać wyraźnie, że preferują Maca — co znaczy, że nie ma np. na liście mojego ulubionego edytora, Komodo Edit. Na szczęście, można wykorzystać ich wskazówki i zrobić to samemu w bardzo prosty sposób.

Otwieramy Toolboxa, klikamy PPM i wybieramy "Add" » "New Command..."

W polu "Command" wklejamy:

curl -sSd css="%S" http://prefixr.com/api/index.php

Jeśli chcemy mieć przypisany skrót klawiszowy (a chcemy), przechodzimy do zakładki "Key Binding" i wpisujemy wybrany skrót. Ja wybrałem Ctrl+L, R.

Czas na test. Wpisujemy jakąś prostą deklarację w oknie edytora, zaznaczamy…

Wciskamy Ctrl+L, a potem R… i voila!

Acha, żeby to zadziałało, w systemie musi być zainstalowany cURL (chociażby stąd: http://curl.haxx.se/ ), a adres jego pliku wykonywalny musi być w zmiennej systemowej PATH (jak mniemam — ja przypadkiem już miałem zainstalowanego cURLa z inną aplikacją, więc u mnie działało „na dotyk”).

I ostatnia sprawa: Prefixr nie radzi sobie niestety z co bardziej specyficznymi deklaracjami. Nie rozwinie nam niestety np:

border-bottom-left-radius: 5px;

Ale po pierwsze, da się samemu ekstrapolować już potrzebne prefixy z rozwinięcia podstawowej wersji deklaracji, a po drugie — mam nadzieję, że będą konsekwentnie usprawniać aplikację.

Dziwne wyświetlanie błędu zawartości pola typu "email" w Chrome.

Nadmienię, że pracowałem na bazie CSSa z najnowszej wersji theme’a WP TwentyTen. Szukałem i szukałem — i koniec końców zawęziłem moje poszukiwania do popularnego resetu styli autorstwa Erica Meyera:

Domyślny reset CSS Erica Meyera.

Na pierwszy rzut oka wszystko gra, nie? Zacząłem więc eliminować części selektora jeden po drugim i jakieś było moze zdziwienie, kiedy okazało się że usunięcie DIVa:

Reset CSS z wykomentowanym DIVem w selektorze.

…naprawiło sytuację:

Poprawne wyświetlanie komunikatu błędu.

Wychodzi zatem na to, że „wbudowane” w Chrome dymki z komunikatami o błędach same są HTMLem stylowanym CSSem — w tym konkretnie przypadku jest to DIV do którego „przenikać” zdają się style ustawiane przez użytkownika. Dziwne cokolwiek…

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

• Quick hits with the Flexible Box Model
• CSS3 Flexbox

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.

• 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

Tym razem efekt był dość ciekawy. Po bezproblemowym odpaleniu wszystkiego i próbie uruchomienia w przeglądarce PhpMyAdmina – zawiecha. Strona ładuje się w nieskończoność. Log w Apache’u nie pokazuje żadnych sensowych wskazówek.

Na szczęście chwila Googlania wskazała właściwy trop — przyznam, że sam na to bym nie wpadł.

Wykomentować jedną linię w pliku hosts

Czyli — w C:\Windows\System32\Drivers\etc\hosts trzeba wykomentować/usunąć linię:

::1             localhost

upewniając się jednocześnie, że jest tam cały czas:

127.0.0.1       localhost

od siebie jeszcze dodam, że po tym dobrze jest z konsoli wyczyścić cache DNS:

ipconfig /flushdns

i oczywiście zrestartować Apache’a. U mnie pomogło

Nie pozostaje nic innego jak hakowanie w oczekiwaniu na nowsze wydanie. Na szczęście sprowadza się to do jednej prostej czynności.

W pliku /wp-content/plugins/simple-tags/simple-tags.php zamieniamy w linii 35:

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false  ) {

na:

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false || strpos($wp_version, '2.9') !== false ) {

I działa

Czasem potrzeba szybko rekursywnie zmienić uprawnienia plików bądź katalogów tak, aby były zapisywalne dla wszystkich użytkowników. Można zrobić to młotkiem – przez FTP, plik po pliku, katalog po katalogu. I stracić w najlepszym razie wiele, wiele minut. Ale jeśli jest dostęp przez SSH, wystarczy wydać polecenie:

find . -type d -exec chmod 777 {} \;

żeby wszystkie katalogi w obecnym folderze i podfolderach stały się zapisywalne dla każdego. Oraz:

find . -type f -exec chmod 666 {} \;

żeby to samo stało się z plikami. Oba polecenia szczególnie przydają się przy przenosinach np. WordPressa z maszyny windowsowej na server linuxowy. Oczywiście należy z tym uważać (hakerzy i inni wandale) – dlatego może lepiej zamieniać na 755 i 644 — ale to już zależy od tego, jak mamy skonfigurowany serwer.

Zaczerpnięte z movabletripe.

Nowa wersja - KP2

1. Rotujące najnowsze zdjęcia – te posty, w kórych pokazuję jakieś kolejne, pojedyncze (czasem 1 + kilka dodatkowych) zdjęcie. Rodzaj fotobloga.
2. Galerie - całe serie zdjęć – z jakiejś imprezy, spotkania, wycieczki, wyjazdu. Część z nich będzie wymagać hasła dostępu, jako że czasem będą to jakieś imprezy rodzinne i nie każdy może sobie życzyć widnieć na tej stronie (to nie Nasza Klasa ). Dlatego jeśli uważasz, że powinieneś mieć dostęp do danej galerii — daj znąć, a prześlę Ci hasło.
3. Zasadnicze posty – wszystko to, co nie jest „fotoblogiem” – podzielone na 3 kategorie: Obrazy (wpisy okołofotograficzno-designerskie), Technika (gadżety, Windows, PC itp.) i Inne (nie wymaga komentarza).
4. Ostatnie komentarze – 4 ostatnie komentarze z całego bloga.
5. Archiwum – sposób na przeglądanie całego archiwum poprzez wyszukiwanie lub oglądanie postów skategoryzowanych pod określonym tagiem.
6. RSS – linki do feedów z danej kategorii.

Cóż, that’s all folks . Mam nadzieję, że nowy design przypadnie do gustu tym kilku osobom, które tu czasem wpadają. Czekam na opinie (najchętniej te negatywne, bo od pozytywów to jest wspomniany portal ;)) i info o ewentualnych wyłapanych bugach.

Tym razem, dla odmiany, zapędziłem do roboty WordPressowe Custom Fields (do obrazka przy najnowszym poście). Kiedy obrazek nie jest zdefiniowany, następuje wstawienie domyślnej grafiki (logo) – jak przy tym poście. W przeciwnym razie dałem sobie do wyboru jeszcze możliwość ustawienia, czy obrazek będzie miał przezroczyste tło (na wypadek wyciętych grafik w 24bit PNG) – tak, żeby mógł nieco wystawać poza ciemnoszary obszar tła.

Ponadto zmniejszyłem ilość starszych postów wyświetlanych pod najnowszym oraz usunąłem z sidebara widgety z ostatnimi komentarzami i listą archiwalnych miesięcy.

Druga, kosmetyczna zmiana ma miejsce na stronie z fotkami. Zdjąłem ciemne tła z podstawowych albumów.

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.

I wszystko pięknie, do momentu, kiedy do zarządzania plikami rzeczywiście korzysta się z Eksploratora Windows. Co wśród ludzi żyjących z pracy przy PCcie nie jest chyba zjawiskiem częstym (chyba że ktoś jest masochistą). Jeśli zatem ktoś używa, powiedzmy, Total Commandera (a trudno o lepszy wybór ) – ma problem. Przy domyślnej konfiguracji TC i TortoiseSVN nie zobaczy nakładek na ikonki oznaczających statusy wersjonowanych plików.

Do niedawna myślałem, że „tak to już jest” – a z SVN nie korzystam jednak na tyle często, żebym nie mógł przeboleć otwarcia okna esploratora od czasu do czasu dla sprawdzenia co jest a co nie jest zcommitowane. Ale ostatnio, podczas pracy nad redesignem Lokiego, coś mnie podkusiło, żeby jednak pogooglać temat. No i jednak da się

Oto co trzeba zrobić:

1. W Total Commanderze wybieramy w menu Konfiguracja > Opcje > Operacja, a następnie w sekcji „Wybieranie za pomocą myszki” upewniamy się, że zaznaczono „Lewy przycisk myszki (jak w Windows)”:
   

   W TC ustawiamy wybieranie za pomocą LPM

2. Wciąż w konfiguracji Total Commandera, w sekcji „Ikony” upewniamy się, że zaznaczona jest opcja „Pokaż nakładkę ikony”:
   

   W sekcji "Ikony" ustawiamy "Pokaż nakładkę ikony"

3. Klikamy w Ekploratorze Windows prawym przyciskiem myszy i z menu kontekstowego wchodzimy do ustawień TortoiseSVN:
   

   Wchodzimy do konfiguracji TortoiseSVN

4. W sekcji „Icon Overlays” upewniamy się, że opcja „Show overlays and context menu only in explorer” jest wyłączona:
   

   Wyłączamy pokazywanie overlayów ikon wyłącznie w Eksploratorze

5. Restartujemy TC – i mamy ikonki
   

   TC z widocznymi nakładkami statusowymi na ikonach

No i to właściwie tyle. Jeśli ktoś ma taką fantazję, może jeszcze zainstalować w Total Commanderze wtyczkę pt. ShellDetails i skonfigurować jakie kolumny z informacjami o SVN będą pokazywane w oknie TC.

Za forum TortoiseSVN.