Przepełnienie reguły css

Nie zawsze jest konieczne, aby element strony był widoczny. Często wystarczy tylko pokazać jego zawartość, zwykle obraz, tekst, tabelę. Reguła CSS z przepełnieniem ustawia tryb wyświetlania zawartości.

Umieszczając w sobie elementy blokowe, można skutecznie regulować wyświetlanie treści w pożądanych granicach, zarządzać suwakami i tworzyć własne opcje zarządzania treścią.

Ogólne zasady stosowania

Reguła CSS z przepełnieniem akceptuje pięć wartości:

• widoczne;
• ukryte;
• przewiń;
• auto;
• dziedzicz.

Gdy widoczny jest wskaźnik, zawartość może rozciągać się poza element. W przypadku ukrycia, część, która wychodzi na zewnątrz, zostanie obcięta. Korzystanie z przewijania i automatycznego pozwala dodawać paski przewijania, aby wyświetlać treści poza elementem.

Rozmiar elementu jest określony przez reguły szerokości i wysokości. Gdy reguła przepełnienia CSS pozwala na przewijanie (przewijanie i wartości automatyczne), jej paski są umieszczane wewnątrz elementu. Nie zawsze jest to wygodne i w większości przypadków nie pasuje do projektu strony, gdy programista jest zainteresowany zarządzaniem treścią i nie planuje używać klasycznych "suwaków".

Ćwicz, gdy element z treścią rozpatrywany jest w izolacji, daje niewielkie możliwości osiągnięcia pożądanego rezultatu. Jeśli element jest uważany za zbiór kilku znaczników bloków zagnieżdżonych lub połączonych ze sobą, otwiera się wiele możliwości.

Kiedy CSS z przepełnieniem nie jest standardową wersją reguły, odpowiedzialność za prawidłowe wyświetlanie treści spoczywa na kodzie JavaScript.

Przykład: JavaScript + przepełnienie bez CSS

Jedyną "wadą" zasad CSS jest wypełnianie misji zgodnie z ich składnią i celem. W większości przypadków jest to więcej niż wystarczające.

Najlepiej użyć funkcji przepełnienia css (wartości auto lub scroll). Podczas testowania zawsze możesz zobaczyć, co jest wyświetlane w konkretnym bloku.

Tymczasem projekt strony, chęć autora do zaoferowania własnej opcji nawigacji po treści i, co najważniejsze, zakresu strony może wymagać wyjątkowo odmiennego rozwiązania niż to, co może zaoferować CSS.

W tym przykładzie bloki mogą zawierać nie tylko treści, które "pełzają" poza granicami. Istnieje potrzeba przesunięcia go względem siebie. Jeden obiekt to emulacja elektronicznej tabeli wymiany walut (w rzeczywistości jest to div), ale dwa wystąpienia treści. W jednym przypadku jeden kierunek wymiany, w drugim - inny.

Każdy blok może rozciągać się (kurczyć) w wysokości i szerokości, znajdować się nad drugim blokiem. Wdrożenie tych funkcji ze standardowym przepełnieniem CSS nie jest możliwe. Po zmianie rozmiaru jednostki głównej należy zrekonstruować wszystkie wewnętrzne elementy div. Jednocześnie rozmiar czcionki powinien zmieniać się proporcjonalnie, ponieważ możliwość obcięcia informacji w programach finansowych wydaje się mieć niewielkie zastosowanie.

Czysty przelew CSS, ale bez suwaków

Przewijanie oferowane przez HTML / CSS jest niewątpliwie praktyczne, a na etapie debugowania jest to po prostu konieczne, ale jest jedna istotna kwestia. Gdy mysz znajduje się nad blokiem, w którym przewija się, zawartość tego bloku jest przenoszona, a nie cała strona.

Ten moment nie jest zbyt wygodny w praktyce: musisz kontrolować miejsce na stronie, na którym możesz obracać kółkiem myszy. Niektórzy użytkownicy tego nie lubią, niektórzy po prostu nie zwracają uwagi.

Tymczasem nic nie przeszkadza twórcy w łączeniu tego, co możliwe z pożądanym. Jeśli zawartość bloku przekracza jego granice, możesz tylko wnieść do niego jego esencję, uniemożliwiając przewijanie w nim. Ale gdy użytkownik zwrócił na niego uwagę, przytrzymując kursor myszy przez chwilę, konieczne jest rozwinięcie bloku do żądanego rozmiaru i wprowadzenie do niego całej zawartości.

W tym przykładzie strona będzie skoncentrowana, co w razie potrzeby może ujawnić sam odwiedzający.

W ogólnym sensie, podczas tworzenia elementów blokowych, należy odejść od idei, że jeden element to jeden "div", "span" lub "td". Myślenie za pomocą znaczników HTML nie jest bardzo satysfakcjonujące. O wiele bardziej praktyczne jest myślenie z elementami semantycznymi strony i to, jak wiele potrzebują do implementacji tagów HTML to kolejne pytanie.

Ruch oparty na treści

Jeśli przyjmiemy pomysł "istnieje blok, którego wymiary determinują jego zawartość", to dla reguły CSS z przepełnieniem jest to zupełnie inna opcja. Nie musisz polegać na standardowym przewijaniu ani pisać własnego kodu JavaScript.

Jeśli projektujesz witrynę jako zbiór elementów, których wielkość i położenie są określone przez ich zawartość, wówczas w zależności od działań odwiedzających, niektóre bloki zostaną ujawnione. Jest możliwe, że zostaną ujawnione na całej stronie lub na jej znaczącej części.

Ogólnie rzecz biorąc, ruch odwiedzającego interesuje się informacją. Jadąc na stronę, obserwuje swój początkowy stan i wybiera to, co jest dla niego interesujące. Ruch myszy na ekranie lub palec na smartfonie automatycznie otwiera aktualny aktualny blok, pozostawiając go do zamknięcia i otwarcia następnego.

Obecnie, gdy tworzenie nowoczesnej strony internetowej nie jest tak trudne, problemem stało się zaskoczenie i zainteresowanie odwiedzających. Przejście od myślenia za pomocą tagów HTML do manipulowania elementami informacji, które są istotne dla odwiedzającego, jest dobrym pomysłem.