ciekawe w css

text wrap

text-wrap: saldo – technika typograficzna polegająca na samodzielnym tworzeniu podziałów wierszy tak by uzyskać równoważne bloki tekstu
text-wrap: balance – równoważy liczbę znaków w każdym wierszu, poprawiając jakość układu i czytelność. Czyli, kiedy ekran robi się mniejszy łamie nagłówek tak by górna i dolna część tekstu była mniej więcej równo złamana. Jest to procedura obciążającą przeglądarkę, dlatego używaj tej własności do nagłówków niż do całych, dużych sekcji tekstu, przykładowo dla Chromium – 6 lub mniej liczby wierszy, Firefox – 10 lub mniej liczby wierszy.

Scrollbar

scrollbar-gutter: stable – w bloku w jakim przy mniejszej wielkości ekranu pojawi się scroll zostawia na niego miejsce, w taki sposób że przy pojawieniu się przewijania elementy wewnątrz nie ulegają przemieszczeniu czy ściśnięciu.

Więcej info o scrollbar-gutter.

input

accent-color – właściwość CSS, która ustawia kolor dla kontrolek interfejsu użytkownika generowanych przez różne elementy typu input jak checkbox, radio, range. Wtedy elementy takie jak checkbox, radio nie mają kolorów natywnie podanych przez przeglądarkę a zdefiniowany przez ciebie.
Kolor możesz podać jako wartość zmiennej CSS, Sass, nazwę koloru CSS, kod 16-tkowy, wartości rgb, wartości hsl.

accent-color: rgb(162, 184, 249);

Jednostki do height & width

Różnica między height: 100vh a height: 100dvh, czyli view-height a dynamic-view-height.
Najbardziej wdać różnicę kiedy ustawiamy obrazek na górze sekcji na pełną wysokość ekranu na urządzeniu mobilnym, z powody różnych dodatkowych sekcji na telefonie, img z height: 100vh nie pokryje tak naprawdę 100% wysokości, w tym przypadku poprawniej zachowuje się height: 100dvh.

max-width: 60ch

Jednostka ch w CSS odnosi się do szerokości jednego znaku „0” w bieżącej czcionce. Jest to miara względna, która pozwala określać szerokości lub odstępy w odniesieniu do szerokości znaku w danym kroju pisma.

Dlaczego akurat „0”?

„0” to znak o stałej szerokości w większości krojów pisma (proporcjonalnych i monospaced), co sprawia, że jest dobrym punktem odniesienia.

Jeśli więc zależy Ci na tym, aby ograniczyć szerokość kolumny tekstu do około 60–75 znaków na linię (zalecana liczba dla czytelności), użycie jednostki ch jest doskonałym wyborem!

Dobrze dopasowana szerokość elementu

• funkcja min(800px, 95%) – zwraca tą wartość, która w danym momencie jest mniejsza, co czyni dany element bardziej responsywnym.
• funkcja max(800px, 95%) – zwraca zawsze większą wartość,
• funkcja clamp(min, preferred, max) – pozwala w jednym zapisie zamieścić wartość preferowaną, najcześciej zależną od szerokości ekranu, minimalną oraz maksymalna

.container {
    width: 50vw;
    min-width: 400px;
    max-width: 800px;
    width: clamp(400px, 50vw, 800px);
}

max-width: fit-conten

Scroll

Właściwość overscroll-behavior ustawiony na wartość none, pozwala na uniknięcie „odbijania” layoutu strony przy szybkim scrollowaniu w dół

:root {
  overscroll-behavior: none;
}

Właściwość scroll-snap-type pozwala ustawić tak zwany punkt przyciągania przewijania, czyli zarządzać trochę bardziej samym mechanizmem scrollowania dzięki CSS.

Tutaj musisz tylko zauważyć że odpowiednią właściwość musimy dodać i do elementy parent i child.

Nasz kod html wygląda tak:

<div class="scroll-wrapper">
  <section class="scroll-section">
    <h2>section 1</h2>
  </section>
  <section class="scroll-section">
    <h2>section 2</h2>
  </section>
  <section class="scroll-section">
    <h2>section 3</h2>
  </section>
  <section class="scroll-section">
    <h2>section 4</h2>
  </section>
</div>

Własność scroll-snap-type, która przypisujemy elementowi parent przyjmuje dwie wartości:

• jako pierwszą y (scroll góra-dół) lub x (scroll lewo-prawo), block, inline, both
• jako drugie deklarujemy w jaki sposób scroll jest interpretowany i tu możemy podać: mandatory (wymuszany, przewija od razu do kolejnej sekcji) lub proximity (tylko wtedy kiedy jest blisko kolejnej sekcji)

Do elementu child przypisujemy właściwość scroll-snap-align, która może przyjmować wartości:

• start – scroll ustawia widok na początek sekcji
• end – scroll ustawia widok na koniec sekcji
• center – scroll ustawia widok w środku sekcji

Kolejne dwie właściwości CSS przydatne przy takim przewijaniu sekcji to scroll-padding oraz scroll-margin.
Scroll-padding, który nadajesz na element parent, może przyjąć wartość o ile od krawędzi przeglądarki mamy padding na elemencie kontenera, lub możemy zdefiniować bardziej precyzyjnie poprzez scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left.

Scroll-margin, który nadajesz na element child, może przyjąć wartość o ile od krawędzi przeglądarki mamy margin na elemencie, lub możemy zdefiniować bardziej precyzyjnie poprzez scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left.

Jedna i druga własność działa podobnie, różnice zobaczysz głownie wtedy kiedy będziesz mieć zdefiniowany background na sekcjach, czyli, tak jak w standardowym zachowani, padding będzie wewnątrz elementu czyli będzie mial kolor elementu, margin będzie poza elementem czyli już bez koloru tła elementu.

Te właściwości przydaje się szczególnie wtedy, kiedy mamy górna nawigację na fixed i nie chcemy by zasłaniała treści w poszczególnych sekcjach.

Więcej info o scroll-snap-type i scroll-snap-align

Kod CSS

.scroll-wrapper {
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}
.scroll-section {
  scroll-snap-align: center;
}

@media print
@media (prefers-reduced-motion)

html
scroll-snap-points-y: repeat(100vh)
scroll-snap-type: y mandatory
section
scroll-snap-align: start

prefers-reduced-motion

subgrid

inset, używając position: absolut można skrócić sobie zapis dla top, right, bottom, left ustawiając odpowiednio: inset: 10px 15px 0 30px
inset – określa odległość elementu od krawędzi rodzica/przodka (jeśli ma ustawione position: relative).
W przypadku kiedy nadasz konkretny wymiar dla elementu inset (height, width), będzie on w position: absolute i ustawisz inset: 0 oraz margin: auto, idealnie wyśrodkujesz element.

filter: drop-shadow – pozwala nadać shadow ikonie.

:focus-within

Pseudo-class :not(), :has()

:not() pozwala na wykluczenie elementu z styli selektora, gdy masz listę buttonów i chcesz by wszystkie były niebieskie poza pierwszym, użyj kodu: .button:not(:first-child) {background-color: blue}
:has() pozwala na wybranie elementu na podstawie obecności innych elementów, stosowany do elementu parenta, pozwala wybrać jego styl w zależności czy ma konkretny child, czy nie.
Jeśli chcesz inaczej oscylować buttony które mają wewnątrz siebie element svg użyj kodu .button:has(svg) {padding-right: 14px}
Fajnie ta opcja sprawdza się również, kiedy chcesz stworzyć dark- i light-mode dla naszych styli. W HTML tworzysz select (dropdown menu) z dwoma opcjami dark-mode i light-mode a następnie w CSS dodajesz style dla body:has(option[value=”dark-mode”]:checked) {background: black; color: white;} Możesz tutaj jeszcze bardziej ułatwić sobie kod poprzez nadpisanie samych zmiennych kolorów:

body:has(option[value="dark-mode"]:checked) {
  --background: black;
  --text-color: white;
}

Nadanie nagłówkom numeracji

kod w Sass

  .parent-container
    counter-reset: headings
    h2, h3, h4
      counter-increment: headings
      &::before
        content: counter(headings) '. '

---

pozbycie się pustego miejsca pod image

Puste miejsce pod image pojawia się w sposób naturalny ponieważ natywnie image jest elementem inline i ma dodany line-height.

Nie jest to problem z dodanym marginem, paddingiem czy nie poprawnie ustawionym box-sizing.

Aby pozbyć się tego zachowania masz parę możliwości:

• do img dodajesz display: block – img nie jest już wtedy traktowany jako element inline
• do elementu który jest parentem wprowadzasz: display: grid, lub display: flex, wtedy jego children, czyli, również element img nie bedą traktowane jako element typu inline