Bramus informiert Jake über die Darstellungsbereiche im Browser. Wenn du Layoutprobleme mit „Positionsfix“, „VW-Einheiten“ oder „Höhe:100 %“ hattest, wird in dieser Folge wahrscheinlich der Grund dafür erläutert.
Kapitel:
- 00:00 – Prolog
- 00:17 – Einleitung
- 01:03 – Desktop-Browser / Darstellungsbereich des Layouts
- 05:33 – Der ICB
- 12:51 – Darstellungsbereichseinheiten
- 16:07 – Pinch-Zoom / der visuelle Darstellungsbereich
- 19:29 – Darstellungsbereich für Layout, ICB und visueller Darstellungsbereich in mobilen Browsern
- 23:30 – Der große, kleine und dynamische Darstellungsbereich
- 28:35 – Darstellungsbereichseinheiten und ihre Beziehung zum ICB
- 30:25 – Verhalten bei der Größenanpassung (auf Mobilgeräten), wenn bearbeitbare Bereiche stärker in den Fokus rücken
- 36:01 – Die Virtual Keyboard API
- 38:44 – Ein Blick in meine Kristallkugel
- 42:04 – Interop 2022 – Prüfung des Darstellungsbereichs
- 43:20 – Epilog
Ressourcen:
- The Large, Small, and Dynamic Viewports → https://goo.gle/3qxhne7
- Über die VirtualKeyboard API verhindern, dass Inhalte unter der virtuellen Tastatur ausgeblendet werden → https://goo.gle/3U9rl2X
- Interop 2022 Viewport Investigation Effort Discussion → https://goo.gle/3DhBHYN
- Interop 2022 Viewport Investigation Effort Test Pages → https://goo.gle/3BDcuqy
- CSSWG-Problem bei der Größenanpassung und Positionierung des Darstellungsbereichs → https://goo.gle/3QJe12q
Spezifikationen:
- (Layout) Viewport Definition (CSS2 Specification) → https://goo.gle/3DlfjxG
- Enthält Block Definition (CSS2 Specification) → https://goo.gle/3Dl9hwN
- Viewport Relative Lengths (CSS Values 4 Specification) → https://goo.gle/3ddLwvZ
- Visual Viewport (MDN) → https://goo.gle/3L9PsKU
- Visual Viewport API (CSSOM-Spezifikation) → https://goo.gle/3qvAJk2
- Darstellungsbereichsvarianten (CSS Values 4 Specification) → https://goo.gle/3U7Wd3M
- Spezifikation der virtuellen Tastatur → https://goo.gle/3qzq7R2
Weitere Videos aus der Reihe „HTTP 203“ → http://goo.gle/HTTP203 Abonnieren Sie Google Chrome-Entwickler hier → https://goo.gle/ChromeDevs
Wenn Ihnen dieser Podcast gefallen hat, könnte Ihnen auch der Podcast HTTP203 gefallen → https://goo.gle/HTTP203Podcast