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 responses to “Mozilla Hacks: Funkcja calc() z CSS3 w Firefoksie 4

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

    • 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.

      ;-)

      • 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

      • @Bartek: -moz-calc nie jest oczywiście standardem, jest implementacją wersji roboczej standardu.

    • PablO

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

  2. Świetne :) Od dawna tego brakowało w CSSie. Mam nadzieję, że podchwycą to inne przeglądarki, a później W3.

  3. look997

    A można np.
    #b {
    width: -moz-calc(#a.width – 1em);
    }

    ?

  4. witek

    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.

    • witek

      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.

    • 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

MDN

Better JavaScript docs for a better Web on MDN

Archiwum

%d bloggers like this: