not a regularly updated weblog, due to lack of time
development: programowanie, webmasterstwo itp.
Poniższa notka to obiecana trzecia część cyklu o nowym podejściu do obiektów w ES5, poświęcona tworzeniu obiektów. Od poprzednich dwóch części minęło trochę czasu, ale przecież lepiej późno niż wcale. Zaczynamy.
Continue reading “ECMAScript 5: Object.create() i prototypy”
Ostatnio przypomniałem podstawy związane z obiektami w JavaScripcie i opisałem nowe sposoby na definiowanie własności obiektów. Dziś druga część nowości ES5 związanych z obiektem Object – zajmiemy się mrożeniem, pieczętowaniem i uniemożliwianiem rozszerzania obiektów.
W ostatnią sobotę w Sali Senatu Polsko-Japońskiej Wyższej Szkoły Technik Komputerowych w Warszawie odbył się barcamp meet.js, na którym przedstawiłem prezentację pod tytułem „JavaScript 1.8.5: Object.*. Nowe sposoby na obiekty w JavaScripcie 1.8.5 i ECMAScripcie 5”. Jeśli kogoś nie było, albo chciałby sobie przypomnieć, o czym była mowa, może obejrzeć sobie slajdy z mojej prezentacji.
Na blogu rozwijam nieco bardziej przedstawiony tam temat. Dziś pierwsza część – w której przypominam krótko, o co chodzi z obiektami JS, i wyjaśniam, czym są deskryptory własności.
Continue reading “Nowe podejście do obiektów w ECMAScript 5. Deskryptory własności”
HTML5 wprowadza atrybut placeholder elementu input. Służy on do określenia tekstu wyświetlanego przez ten element, kiedy nie została wprowadzona do niego żadna wartość. Jest on obsługiwany przez silnik Gecko Firefoksa oraz WebKit (Safari, Chrome).
Na przykład, jeśli chcemy, by niewypełnione pole służące do wprowadzenia adresu e-mail wyświetlało napis “Wpisz adres e-mail”, wystarczy nadać ten atrybut wybranemu inputowi (demo #1):
<!DOCTYPE html> <html lang="pl"> <title>input placeholder demo</title> <form method="POST"> <label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label> </form>
Tak to będzie wyglądało:
Firefox od następnej wersji beta (a w nightly buildach – od dziś) obsługuje ponadto stylowanie tego napisu. Oznacza to, że może on mieć np. inny kolor lub tło niż domyślny szary. Przydaje się to szczególnie, jeśli zmieniliśmy kolory tła naszych inputów.
W chwili obecnej standard CSS nie opisuje zasad stylowania takiego tekstu, przeglądarki implementują więc na razie własne, niestandardowe rozwiązania. Do ustawienia stylu dla tekstu placeholdera w Gecko używamy pseudoklasy :-moz-placeholder. W przeglądarkach opartych na silniku WebKit korzystamy z pseudoelementu ::-webkit-input-placeholder. Tak więc, by w Firefoksie, Chrome i Safari nadać zielony kolor placeholderowi, musimy jak na razie użyć dwóch regułek (demo #2):
<!DOCTYPE html>
<html lang="pl">
<title>input placeholder demo</title>
<style>
input:-moz-placeholder {color: #00cc00}
input::-webkit-input-placeholder {color: #00cc00}
</style>
<form method="POST">
<label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label>
</form>
Efekt:
Ważne: ponieważ regułka CSS jest odrzucana przez parser, jeśli przynajmniej jeden z selektorów oddzielonych przecinkiem jest dlań niezrozumiały, niestety NIE możemy uprościć tych regułek do postaci:
input:-moz-placeholder,
input::-webkit-input-placeholder {color: #00cc00}
ponieważ żadna przeglądarka nie rozumie ::-webkit-* i :-moz-* równocześnie. Muszą to być zatem dwie osobne regułki, tak jak we wcześniejszych przykładach.
Uwaga: różnice między pseudoklasą a pseudoelementem sprawiają, że nieco inny jest zakres możliwości stylowania tego tekstu (porównaj demo #3 w Gecko i WebKicie). Dopóki jednak ograniczamy się do prostych rzeczy (np. zmiana koloru), można uzyskać w obu silnikach taki sam wygląd.
W tym odcinku tłumaczeń artykułów z Mozilla Hacks – notka Paula Rougeta o calc() w CSS. Zarówno oryginalny artykuł, jak i to tłumaczenie dostępne są na licencji Creative Commons – Attribution 3.0.
Poniżej omówiona została funkcja calc() z CSS3. Firefox jej jeszcze nie obsługuje, ale trwają prace nad jej implementacją.
Firefox będzie obsługiwał wartość calc() w CSS (na etapie eksperymentalnym jako -moz-calc() – przyp. tłum.), pozwalającą wyliczyć wymiary danego elementu jako wynik wyrażenia arytmetycznego. Przyda się to przy określaniu wymiarów div-ów, wielkości marginesów, obramowań itp.
Poniżej układ, którego zakodowanie bez użycia funkcji calc() wymagałoby sporo akrobacji (lub użycia JavaScriptu – przyp. tłum.):
/* * Dwa divy obok siebie, oddzielone marginesem o szerokości 1em */ #a { width:75%; margin-right: 1em; } #b { width: -moz-calc(25% - 1em); }
W poniższym przykładzie zadbamy o to, żeby pole tekstowe nie pokrywało się ze swym elementem nadrzędnym:
input { padding:2px; border:1px solid black; display:block; width: -moz-calc(100% - 2 * 3px); }
Jedną z bardziej przydatnych możliwości, jakie daje nam funkcja calc(), jest łączenie wartości w różnych jednostkach:
width: -moz-calc(3px + 50%/3 - 3em + 1rem);
Obecna implementacja obsługuje operatory: +, -, *, /, mod, min i max.
Będziemy również obsługiwać funkcje min() i max(), które można będzie wykorzystać na przykład tak:
div { height: -moz-min(36pt, 2em); width: -moz-max(50%, 18px); }
Więcej informacji:
marcoos.techblog 