7 nowych funkcji do stworzenia responsywnej strony internetowej

Nowoczesny CSS przejmuje pełną kontrolę nad stylizacją strony za pomocą wymaganego JavaScript. W tym artykule przedstawimy siedem nowych aktualizacji CSS, aby uprościć przyszłość stylizacji. Ponadto rozważamy obsługę przeglądarek Chrome, Edge i Firefox. Na koniec omówimy problemy, rozwiązania i prawie wszystko, czego potrzebujesz, aby od razu zacząć.

Biorąc pod uwagę wszystkie sztuczki i techniki, oto kilka starannie dobranych funkcji CSS, które są warte twojego czasu. Więc bez zbędnych ceregieli, zagłębimy się w to.

1. Podsiatka CSS

W przeciwieństwie do zdolności CSS flexbox do poruszania się tylko w jednym kierunku, możesz zdefiniować oba wymiary w siatkach. W miarę jak w nadchodzących dziesięcioleciach stają się coraz bardziej popularne i potężne, w projektach internetowych można zaobserwować ogromne zmiany. Siatki zagnieżdżone służą do rysowania siatek wewnątrz siatek. Ale jakie są główne wady, które wywołały wezwanie do podsieci CSS?

• Siatki zagnieżdżone po poziomie 2 służyły do ​​przelewania treści poza większą siatkę, co miało duży wpływ na responsywność witryny.
instagram viewer
• Siatki zagnieżdżone działały jako niezależne elementy wewnątrz większego kontenera siatki. Nie było żadnego odniesienia do kontenera nadrzędnego dla jakiejkolwiek zmiany.

Bez podsiatek:

Po podsiatkach:

Oto jak możesz zaimplementować podsiatki:

.pojemnik {
szerokość: 700px;
wysokość: 500px;
tło: rgb (214, 255, 139);
wyświetlacz: siatka;
kolumny szablonu siatki: 1fr 1fr 1fr 1fr;
rzędy szablonów siatki: 1fr 1fr 1fr 1fr;
}
.container div {
tło: rgb (72, 170, 137);
wiersz siatki: 2/3;
kolumna siatki: 2 / 5;
wyświetlacz: siatka;
kolumny-szablonu siatki: podsiatka;
grid-template-rows: subgrid;
}

Możesz umieścić wiele podsiatek. Godnym uwagi wyjątkiem jest to, że podsiatki dziedziczą nadrzędną właściwość odstępu siatki. Spowoduje to utworzenie wszystkich podsiatek z takimi samymi właściwościami odstępów wewnątrz każdej siatki macierzystej.

Najlepszą rzeczą w podsiatkach jest to, że są bardzo responsywne, regulowane i skalowalne.

Kompatybilność z przeglądarką: Firefox

2. współczynnik proporcji Właściwość

Możesz wyeliminować wszystkie problemy z korektą i obliczeniami, zmieniając proporcje danego kontenera. Jeśli chcesz wstawić wideo, wszystko, co musisz zrobić, to ustalić współczynnik proporcji w stosunku do zmieniającego się rozmiaru ekranu. Ale podczas pracy z dwuwymiarowymi siatkami wielokrotnymi istnieje ryzyko przepełnienia i domyślnego widoku.

Możesz to naprawić, obsługując właściwość proporcji z atrybutem szerokości. Przydaje się w przypadku responsywnych obrazów, ponieważ można zdefiniować wysokość lub szerokość.

Oto jak zaimplementować właściwość proporcji:

.pojemnik {
szerokość: 700px;
proporcje obrazu: 16/9;
tło: rgb (72, 170, 137);
}

Możesz również wprowadzić współczynnik proporcji: auto zamiast określać współczynnik. Wadą domyślnej wartości automatycznej jest to, że przeglądarka wybierze oryginalny wymiar obrazu. Niewątpliwie utrudnia to responsywność strony.

Kompatybilność z przeglądarkami: Chrome, Edge, Firefox (częściowo)

3. Szczelina Flexbox

Grid-gap jest dość popularny do tworzenia równych odstępów między każdą siatką. Ale należało zastosować ujemne marginesy, selektory pseudoklasowe i złożone selektory, aby obsłużyć przestrzeń między poszczególnymi elementami elastycznymi. W ten sposób luka Flexbox skutkuje mniejszą liczbą wierszy kodu przy większej skalowalności.

Oto jak możesz zaimplementować lukę flexbox:

.pojemnik {
szerokość: 700px;
wysokość: 500px;
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
uzasadnić-treść: centrum;
odstęp: 1em;
}

Wynik:

Kompatybilność przeglądarek: wszystkie główne przeglądarki, w tym Chrome, Edge i Firefox.

Przewijanie pomaga w udostępnianiu większej ilości informacji o jednej witrynie bez zaśmiecania kopii internetowej. Ale główną wadą przewijania jest to, że może zatrzymać się na połowie para lub obrazu. Czasami kontrola treści podzielonych na strony jest pozostawiona w połowie. JavaScript jest starannie używany, aby uniknąć dostosowywania przewijania. Ale nie był to w pełni satysfakcjonujący wynik, dopóki nie pojawił się CSS Scroll Snap.

Za pomocą Scroll Snap możesz zdefiniować określone granice, aby poprawić układ i widoczność danego kontenera. Na przykład świetnie działa tworzenie karuzeli i określonych sekcji witryny. Pamiętaj, że nie będziesz potrzebować JS do żadnych zmian.

Oto jak zaimplementować przyciąganie przewijania:

.pojemnik {
szerokość: 100%;
wzrost: 100%;
wyświetlacz: elastyczny;
przepełnienie-x: przewijanie;
scroll-snap-type: x obowiązkowe;
}
Sekcja {
elastyczność: brak;
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
uzasadnić-treść: centrum;
rozmiar czcionki: 15em;
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
scroll-snap-align: koniec;
szerokość: 100%;
wzrost: 100%;
}

Wynik:

Przyciąganie przewijania CSS ma właściwość rodzica i dziecka. Właściwość parent lub container określa kierunek przewijania (x lub y) oraz zachowanie przyciągania przewijania. Na przykład możesz ustawić scroll-snap-type: x obowiązkowe. Umożliwi użytkownikowi kontrolę nad określeniem punktu przewijania bez uwzględniania pozycji przewijania.

Z drugiej strony, zbliżeniowość typu scroll-snap: y działa tylko wtedy, gdy odwiedzający witrynę znajduje się bliżej punktu przewijania.

Właściwość potomna to scroll-snap-align, aby wyrównać elementy podczas przyciągania przewijania CSS. Wprowadza wartości początkowe, końcowe i środkowe, aby odpowiednio wyrównać elementy.

5. Zapytania dotyczące funkcji

Zapytania o funkcje służą do radzenia sobie z łagodną degradacją. Na przykład siatki CSS są obecnie dość popularne. Warto jednak wspomnieć, że starsze przeglądarki nie potrafią tego renderować.

Tutaj zapytania o funkcje sprawdzają, czy dana przeglądarka obsługuje określoną usługę, czy nie, i daje system wsparcia, który zachęca do odwoływania się do właściwości CSS tylko wtedy, gdy jest ona obsługiwana na tym przeglądarka. W przeciwnym razie brana jest pod uwagę wartość domyślna. W takim przypadku możesz umieścić bloki zamiast siatek dla dowolnego przewidywanego powrotu.

Oto, jak możesz zaimplementować zapytania dotyczące funkcji:

@supports (widoczność treści: auto) {
ciało{
tło: turkusowy;
szerokość: 100%;
wzrost: 100%;
}
}

Dlatego tylko te przeglądarki, które renderują właściwości widoczności treści, będą miały turkusowy kolor tła; w przeciwnym razie brana byłaby pod uwagę wartość domyślna. Zauważ, że @ jest podobne do @media zapytań o media, gdzie należało ustawić maksymalną lub minimalną szerokość, aby wprowadzić prowizoryczne korekty. Ułatwia zapamiętywanie zapytań o funkcje @supports.

Czytaj więcej: Jak korzystać z zapytań o media w HTML i CSS

Kompatybilność przeglądarek: wszystkie główne przeglądarki, w tym Chrome, Edge i Firefox.

6. Widoczność treści

Szybkie renderowanie działa jak szkielet witryny interaktywnej dla użytkownika. Wraz z rosnącą popularnością urządzeń mobilnych wydajność renderowania strony internetowej działa jak wąskie gardło dla uzyskania atrakcyjnej strony internetowej.

Tutaj właściwość widoczności treści odgrywa kluczową rolę. Ponieważ domyślnie przeglądarki renderują wszystkie elementy strony jednocześnie. Zmniejsza czas ładowania i ogólną wydajność witryny, zwłaszcza jeśli Twoja witryna ma wiele ciężkich animacji. Z drugiej strony właściwość content-visibility renderuje tylko elementy rzutni i pokazuje inne elementy podczas przewijania strony.

#Główny {
widoczność treści: auto;
/* zawiera-wewnętrzny-rozmiar: 0 500px; */
}

Właściwość content-visibility wprowadza trzy wartości. content-visibility: visible nie pokazuje żadnego efektu, natomiast content-visibility: hidden jest podobny do display: none, gdzie element pomija niedostępną zawartość. Widoczność treści: automatycznie pomija nieistotną treść, ale jest dostępna jako normalna strona dla funkcji klienta użytkownika.

Zmierzmy siłę widoczności treści. Oto wynik:

7. Przejście, transformacja i animacja

W CSS mamy dwa sposoby na zastosowanie animacji. Przejście służy do płynnych zmian właściwości wizualnych elementów. Z drugiej strony, bez przejścia transformacja gwałtownie przeszłaby z jednego stanu do drugiego.

Animacje są używane z @keyframes, które ustawiają style w kilku punktach podczas trwania animacji. Ciekawe jest to, że @klatki kluczowe określają, kiedy nastąpi zmiana, transform i animacja przejmują kontrolę nad zmianą, a przejście dba o to, jak nastąpi zmiana (np. efekty najechania).

.dziecko {
tło: turkusowy;
wysokość: 150px;
szerokość: 150px;
kolor biały;
przejście: transformacja 0,2 s easy-in-out;
animacja: myAnimation 2s nieskończona;
}
.dziecko: najedź {
transformacja: skala (2, 2) obrót (45 stopni);
}
@keyframes myAnimation {
0% {
}
50% {
przekształcenie: przetłumaczX(400px)
}
100% {
przekształcenie: przetłumaczX(0px)
}
}

Kompatybilność przeglądarek: wszystkie główne przeglądarki, w tym Chrome, Edge i Firefox.

Zawijanie

Kaskadowe znaczniki w arkuszu stylów stale się rozwijają, oferując coraz lepsze funkcje. Do tej pory dowiedziałeś się o tych siedmiu niesamowitych funkcjach, które obejmują podsiatkę CSS, właściwość proporcji, luki flexbox, przyciąganie przewijania, zapytania o funkcje, właściwość widoczności treści, przejście, transformacja i animacja.

Koniec końców musisz się upewnić, które funkcje upraszczają stylizację Twojej witryny.

7 nowych funkcji, na które należy zwrócić uwagę w Bootstrap 5

Jeśli tworzysz strony internetowe i aplikacje przy użyciu struktury Bootstrap CSS, oto nowości w Bootstrap 5.

Czytaj dalej

O autorze