Snippet: kiedy media queries nie działają na responsywnej stronie na urządzeniu mobilnym

Rzecz super prosta, ale zaczynając przygodę z responsive można o tym zapomnieć. Media queries w CSS to rzecz jasna i o nich się pamięta. Na desktopowej przeglądarce skalujemy przeglądarkę i wszystko działa. Gorzej jest, kiedy zaczniemy testować stronę na urządzeniu – okazuje się, że telefon czy tablet skalują stronę.

Snippet: box-sizing: border-box

Piękny to parametr, który ułatwia życie. Dzięki niemu, wartość w szerokość elementu w CSS nie jest wliczany padding i border, co ratuje tyłek przy tworzeniu skalowalnych layoutów na gridzie. Zurb Foundation ma to w standardzie, dziwię się że Twitter Bootstrap jeszcze nie.

1
2
3
4
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

Szerzej na ten temat rozpisał się Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/

Snippet: gdy mobilne Safari dziwnie skaluje tekst na responsywnej stronie

Kilkukrotnie zdarzało mi się trafić na sytuację, kiedy przy budowie responsywnej strony zupełnie bez większego uzasadnienia część tekstu na stronie wyświetlanej na Safari pod iOS zmieniało swój rozmiar, pomimo zdefiniowanych reguł w ramach media queries. Oczywiście taki problem nie był widoczny na przeskalowanej przeglądarce desktopowej, więc zupełnie nie wiedziałem jak się zabrać do zdebugowania tego problemu. Na szczęście, poszukując desperacko rozwiązania trafiłem na taki parametr w CSS:

-webkit-text-size-adjust: 100%

Warto zwrócić uwagę na zastosowane tutaj 100%. Problem rozwiązać może też ustawienie wartości „none”, przy czym to zablokuje skalowanie rozmiaru tekstu na przeglądarkach dektopowych poprzez „ctrl+/ctrl-” (lub „cmd+/cmd-” na OS X).

Więcej na ten temat na http://blog.55minutes.com/2012/04/iphone-text-resizing/

Snippet: jak poprawić antialiasing pod Chrome na Mac OS X?

Czasami zdarza mi się, że na Chrome pod OS X czcionki wyglądają na zbyt grube. Graficy od razu zaczynają płakać a akanci popadają w depresję, tłumacząc klientowi dlaczego strona nie wygląda w przeglądarce identycznie jak w Photoshopie. Prosta rada: zmienić wartość parametru font-smoothing w CSS.

-webkit-font-smoothing: antialiased

Uwaga: działa to tylko na Maku. Pod Windows nie ma absolutnie żadnej różnicy. No i warto stosować z rozwagą. Zwykle, bardzo poprawia to wyrazistość przy dużych nagłówkach, natomiast zastosowanie tego parametru do tekstu głównego o rozmiarze 12-14 punktów może sprawić, że tekst zacznie wyglądać jak na IE6 pod Windows 98 :)

Snippet: Dodawanie aplikacji w Facebook Developers jako zakładka na fan page

Facebook Developers jest ciągle udoskonalane, ale zawsze miało swoje wady i braki i to pewnie nie zmieni się jeszcze długo. W końcu facebook znany jest z tego, że to portal nieco „roztrzepany” :)

Jedną z funkcji, z których przez ostatnie dwa lata korzystałem bardzo często a do której kompletnie brakuje funkcjonalności w panelu developerskim jest opcja dodania utworzonej aplikacji jako zakładki na fan page klienta. W moim podręcznym notatniku z linkami na honorowym miejscu znajduje się taki oto snippet:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_ID to oczywiście wygenerowane przez Facebooka ID aplikacji, natomiast YOUR_URL to adres w domenie aplikacji zgodny z tym podanym w developers, np. http://your-app.herokuapp.com/

Spotify w Polsce – krytycznym okiem

Aż zawrzało. Spotify w Polsce. Wszyscy dziś skaczą z radości. Rzeczywiście, jest z czego się cieszyć, w końcu to lider tego segmentu i kawał dobrej usługi. W sieci pełno pochlebnych opinii i opisów benefitów które niesie usługa i dostarczony wraz z nią program, dlatego jako przeciwwaga do wszechobecnego aplauzu postanowiłem opisać, co jak na razie wkurzyło mnie w Spotify.