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

Sekcja 1Calc() - 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.

Sekcja 2Calc() - 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).

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

Przeglądarka	wsparcie
Mozilla Firefox	tak
Google Chrome	tak
Opera	nie
Safari 5/6	nie/tak
Internet Explorer 7/8/9	nie/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.