inline-size w CSS3

By /

CSS

W nowoczesnym projektowaniu stron internetowych, CSS3 wprowadza wiele właściwości, które ułatwiają tworzenie responsywnych i elastycznych layoutów. Jedną z takich właściwości jest inline-size, która pozwala na określenie szerokości elementu w kontekście jego lokalnego układu pisania (writing mode). Jest to szczególnie przydatne w projektach wielojęzycznych, gdzie kierunek tekstu może się różnić (np. z lewej na prawą lub z góry na dół).

Przykład użycia inline-size

Poniższy przykład przedstawia użycie inline-size w połączeniu z prostym kodem HTML i JavaScript, aby zilustrować, jak można dynamicznie zmieniać szerokość elementu w zależności od układu pisania.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania inline-size w CSS3</title>
    <style>
        .dynamic-width {
            background-color: lightblue;
            padding: 20px;
            /* Ustawienie początkowej szerokości */
            inline-size: 300px;
        }
    </style>
</head>
<body>
    <div id="dynamicWidthBox" class="dynamic-width">
        Tekst w elemencie z dynamiczną szerokością
    </div>
    <button id="changeWidthBtn">Zmień szerokość</button>

    <script>
        // Pobranie elementu i przycisku
        const dynamicWidthBox = document.getElementById('dynamicWidthBox');
        const changeWidthBtn = document.getElementById('changeWidthBtn');

        // Funkcja zmieniająca szerokość elementu
        function changeWidth() {
            const currentWidth = dynamicWidthBox.style.inlineSize;
            const newWidth = currentWidth === '300px' ? '100px' : '300px';
            dynamicWidthBox.style.inlineSize = newWidth;
        }

        // Nasłuchiwanie na kliknięcie przycisku
        changeWidthBtn.addEventListener('click', changeWidth);
    </script>
</body>
</html>

Zastosowanie inline-size

Właściwość inline-size jest szczególnie użyteczna w kontekstach, gdzie układ strony może się zmieniać w zależności od języka lub preferencji użytkownika. Pozwala ona na bardziej intuicyjne i elastyczne zarządzanie szerokością elementów, co jest kluczowe w responsywnym designie. Dzięki inline-size, deweloperzy mogą łatwiej adaptować swoje strony do różnych układów pisania bez konieczności stosowania złożonych hacków czy workaroundów.

Podsumowanie

inline-size w CSS3 to potężne narzędzie dla projektantów i deweloperów stron internetowych, pozwalające na bardziej elastyczne i intuicyjne zarządzanie szerokością elementów w zależności od kierunku tekstu. Jest to szczególnie ważne w kontekście tworzenia stron wielojęzycznych i responsywnych. Przykład przedstawiony w tym artykule ilustruje podstawowe użycie inline-size oraz pokazuje, jak można dynamicznie zmieniać szerokość elementu za pomocą JavaScript, co otwiera drogę do tworzenia bardziej interaktywnych i dostosowanych do użytkownika interfejsów.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top