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:

12 thoughts on “Mozilla Hacks: Funkcja calc() z CSS3 w Firefoksie 4

  1. Było kiedyś coś takiego:
    a{
    width: expression(document.body.clientWidth > 800? “800px”: “auto”);
    }

    1. To co innego. Expression było tylko w IE (już nie ma), po drugie działało zatrważająco niewydajnie, po trzecie nie działało bez JS., po czwarte było niestandardowym rozszerzeniem, w przeciwieństwie do standardowego calc(). Na plus expression można zaliczyć potencjalnie trochę większe możliwości.

      Inna sprawa, że akurat podany przez Ciebie przykład w normalnych przeglądarkach można zapisać po prostu tak:

      a {
      min-width: 800px;
      }

      natomiast zrobienie “100% – 1px” przy pomocy expression wymaga nieco więcej zabawy.

      ;-)

      1. hmm… -moz-calc to jest standard? ja słyszałem, że css3 nie jest jeszcze standardem ;] a za nim wejdzie i będzie w pełni obsługiwany przez wszystkie przeglądarki zjem nie jedną beczkę soli ;p

    2. expression nie wyliczy 3px + 50%/3 – 3em + 1rem.
      Zaś Twój przykład to po prostu max-width w badzIEwiu nr 6.

  2. A można zagniżsżać?

    width: calc(0.8 * max(12px, 33% – 1in) + min(33px, 10%)) ?

    Jak podać wartość dla przeglądarek starszych? Tzn. czy mmuszę mieć dwa arkusze stylu czy np. mogę zrobić coś takiego:

    width: 100px, calc(10% – 1em); ?

    a może tak

    width: 100px;
    width: calc(10% – 1em); ?

    Oczywiście calc jest napewno lepsze niż expression() z IE, bo to nie javascript tylko proste wyrażenia są dozwolone.

    1. Oczywiście chciałem napisać -moz-calc wszędzie. calc() jeszcze nie jest ustandaryzowany, więc używać raczej nie można ani nie ma sensu, bo może się zmienić lekko standard.

    2. Drugi przyklad powinien dzialac. Zasada jest taka, ze pozniejsza deklaracja nadpisuje wczesniejsza, o ile zostanie “zrozumiana”.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s