Pivovar Lajka 12. 11. 2025

Brno dnes: Přístupný diskuzní večer

note:

• představit spolek

  Budujeme a vzděláváme komunitu frontendových vývojářů a designérů

• organizační náležitosti
• Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Call for papers AKA náležitosti na webu Frontendisti.cz

Někdy příštěěě

• 19. listopadu, Bratislava
• 10. prosince, Brno
• 11. února, Praha

WWW minulém díle jste viděli

• Stage F
• Stage E
• Partnerská stage
• Honza Svěrák: JavaScript is dead: 7 příkladů, kde už si vystačíš jen s moderním CSS
• Adam Kulhánek: Smart & Kind: psychologie IT mozku
• Michal Špaček: Pomoz password managerům pomáhat lidem

note:

• koutpeny od Honzy Svěráka

Letem swwwětem

Prohlížeče

Firefox 145
vydán 11. listopadu 2025
Chrome 142
vydán 22. října 2025
Safari 26.1
vydáno 4. listopadu 2025

Web platform status

běžně dostupné: 11/2025

• matematické funkce
• container queries
• @media (23ch < width <= 78ch)
• :nth-child() of <selector>
• lab, lch, oklab a oklch
• funkce color() a color-mix()
• inert
• konstanty pro calc(): e, pi, infinity, -infinity, NaN
• JS moduly (ESM) ve workerech
• :autofill
• a další…

note:

• běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF
  • fičury nově dostupné v prvním pololetí 2023
• atribut inert: označí NEintaraktivní prvky
• matematické fce s výjimkou abs() a sign()
• :autofill – formulářová pole vyplněná prohlížečem

nově dostupné: 11/2025

• View transitions
• ::details-content
• content-visibility

note:

• nově dostupné: aktuální verze CH, FF, SF podporují
• FF doplnil základní podporu přechodů v 144
• content-visibility SF od verze 26

omezená dostupnost: 11/2025

stačilo dost!

note:

• dostupné jen v některých prohlížečích

Zachyceno v síti

Ana Tudor: Super Simple Full-Bleed & Breakout Styles

note:

• bohatě okomentovaná případovka
• už po několikáté jsem narazil na zmínku o box-sizing: border-box

Potřebujeme nastavovat box-sizing?

*,
&::before,
&::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

• Miriam Suzanne: Don't Inherit the Box Model
• Kevin Powel: It might be time to rethink box-sizing: border-box

note:

• podle mnohých už ho neopotřebujeme, protože dávno nenastavujeme prvkům pevné rozměry
  • dědictví Bootstrapu, jehož rozvržení vycházelo z pevně daných rozměrů (má to tam ještě verze 5, ehm)
• tzn. nechat výchozí box-sizing: content-box a kde je to potřeba nastavit border-box
• nicméně Kevin nedoporučuje to vykuchávat z existujících projektů
• There's no such thing as a CSS reset

Programátorské bludy

• Falsehoods Programmers Believe About Names
• Falsehoods programmers believe about languages
  
• Falsehoods programmers believe about time
  

Roma Komarov: Fixing baselines

baseline-source: auto|first|last

note:

• baseline-source
  • podpora jedn CH a FF

Roma Komarov: Fixing baselines

.with-extra-element {
	--gap: 0.5em;
	gap: var(--gap);
}

.with-extra-element::before {
	content: '\a0'; /*   */
	width: 0;
	display: inline-block;
	visibility: hidden;
	margin-left: calc(-1 * var(--gap, 0));
}

note:

• protože používá inline-flex příp. inline-grid, pracuje s gap a je potřeba ho vyrovnat záporným marginem
• hezký tip: když použijete escapovaný zápis, zapište do komentáře, o jaký znak se jedná

Nástroje a udělátka

DevTools: rozdělit svisle

chrome://flags#side-by-side

note:

• Elements a Network současně (move to drawer)

KoutPen

Instant snapport

note:

• CSSence: Matthias Zöchling
• selektor [id] => prvky s id, tj. lze předpokládat kotvu
• vypnout nastavení: odvine se pod záhlaví
• scroll-margin: přidává se prvku, na který scrolluji
• scroll-padding: přidává se stránce (případně prvku, v němž scrolluji)

Roma Komarov: předávání id

note:

• atribut anchor je zatím experimentální (jen CH Canary)

Dnes wwwečer

• Tomáš Litera, Alma career
  Kdo ovládá npm závislosti, ovládá JavaScript vesmír
• Jiří Cerhan, SiteOne & Frontendisti
  (Ne)tvoříme neexistující aplikace s AI
• Riskuj
• Bleskovky akože lightning talks

Díky, prezentace v komentáři na Meetup.com