search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Jak zrobić uzupełnienie procentowe dla kontenera zawierającego obrazek z ustaloną szerokością?

[CSS] Jak zrobić uzupełnienie procentowe dla kontenera zawierającego obrazek z ustaloną szerokością?

Projektanci stron WWW bardzo często się spotykają z problemem: jak zrobić, aby zawartość elementu następującego miała szerokość ustaloną w procentach minus konkretną szerokość wybranego elementu?
Do tej pory to było niemożliwe, aby coś takiego osiągnąć bez wykorzystania JS.

Calc() - ustawienie, które robi różnicę ... dosłownie

Teraz jest już rozwiązanie, możemy skorzystać z atrybutu CSS o nazwie calc(). Jest to bardzo ciekawy atrybut, którego możliwości są znaczące i ułatwia on tworzenie samo-dopasowujących się layoutów na stronach WWW.
Jego zadaniem jest wykonywanie działań arytmetycznych takich jak:

  • dodawanie,
  • odejmowanie,
  • mnożenie,
  • dzielenie.

Dzięki temu jest w stanie obliczyć jaką szerokość powinien mieć element do którego zastosowano calc(). Tym samym zostaje rozwiązany problem w przypadku tworzenia stron responsywnych (RWD), które zawierają elementy o stałej szerokości.

Calc() - zastosowanie

calc() jest funkcją CSS3, którą stosujemy przy ustalaniu szerokości elementu. Jego implementacja wygląda następująco:

1
2
3
4
<div class="content">
    <img src="obraz.jpg" alt=""/>
    <p class="text">Tekst</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.content {
    width: 100%;
}
.content > img {
    width: 240px;
    height: auto;
}
.content > .text {
    width: 50%;
    width: -webkit-calc(100% - 240px);
    width: -moz-calc(100% - 240px);
    width: calc(100% - 240px);
}

Dla elementu z klasą text zastosowano funkcję calc(), której zadaniem jest odjęcie szerokości obrazka od szerokości kontenera rodzica i obliczenie jaką szerokość będzie miał element.
Dla przeglądarek nie obsługujących funkcji, dodałem szerokość z ustaloną wartością procentową (założenie było takie, że najmniejsza obsługiwana szerokość dla której obrazek będzie miał szerokość 240px to 480px).

Calc() - zgodność z przeglądarkami i podsumowanie

Przeglądarkawsparcie
Mozilla FirefoxMozilla Firefoxtak
Google ChromeGoogle Chrometak
OperaOperanie
SafariSafari 5/6nie/tak
Internet ExplorerInternet Explorer 7/8/9nie/nie/tak

Powyższe zestawienie pokazuje, że najnowsze wersje przeglądarek obsługują już funkcję calc(). Co jest bardzo dobrą wiadomością. Niemiłym zaskoczeniem jest brak wsparcia dla Opery.

Można wywnioskować z tego jedną rzecz. Jeśli tworzysz strony WWW, które mają obsługiwać najnowsze możliwości CSS3 to wykorzystanie wcześniej wspomnianej funkcji ma jak najbardziej sens. Natomiast, jeśli wymagane jest wsparcie starszych wersji przeglądarek, to obawiam się, że bez JavaScriptu nie będzie można uzyskać tego efektu.

  • Dzięki wielkie za ten wpis! Naprawdę często przysparzało to trudności, a teraz jak widać można to załatwić naprawdę szybko.

  • Comandeer

    Prawdę powiedziawszy na śmierć zapomniałem o tej przydatnej funkcyjce. Byłem też pewien, że wsparcie wciąż jest minimalne. Na szczęście się myliłem 😉
    Jednakowoż wiem, że kilka problemów rozwiązało po prostu przejście na inny box model (border-box), gdzie przy normalnym trza by było się zdrowo nakombinować (width:100% – border i takie tam)

  • Czasem przydaje się
    width: available;
    ale to niemal nigdzie nie działa jak powinno 🙁

  • Piotr Nalepa

    Nie znam takiego ustawienia szerokości i nie mogę znaleźć jakiegokolwiek przykładu działającego.
    Chętnie poznam, jeśli powiesz o tym coś więcej.

  • Działa to mniej/więcej tak jakbyś miał auto z tym, że wypełnia zawsze całą dostępną przestrzeń. Działało w jakiś chory sposób z przedrostkami typu (dla atrybutu lub wartości): -moz-width lub -moz-available