Mozilla Hacks: Funkcja calc() z CSS3 w Firefoksie 4

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.

Funkcja calc() z CSS3 w Firefoksie 4

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:

Advertisements

MDN

Better JavaScript docs for a better Web on MDN

Archiwum