Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Damit der Seitennhalt nun mit und ohne Scrollbar horizontal gleich plaziert ist, zieht man rechts beim Padding die Breite der Scrollbar ab. Dazu fügt man als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Die Breite der Scrollbar – d.h. den Wert der *custom property*{:@en} – berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Damit der Inhalt nun mit und ohne Scrollbar horizontal gleich plaziert ist, zieht man recht beim Padding die Breite der Scrollbar ab. Dazu fügt man als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Die Breite der Scrollbar – d.h. den Wert der *custom property*{:@en} – berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Den Wert der *custom property*{:@en} berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Den Wert der *custom property*{:@en} berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc( (100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Den Wert der *custom property*{:@en} berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Darstellungsproblem
bearbeitet von Gunnar Bittersmann@@MudGuard
> Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
>
> Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit `body { max-width: 42rem; margin: auto }`{:.language-css} nicht. Also mit [Santa hat selector](https://forum.selfhtml.org/self/2016/dec/16/link-nicht-verlinkt/1682717#m1682717){:@en hreflang="de"} zentriert:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
~~~
Die Regeln gehen davon aus, dass als Kinder von `body` nur Strukturelemente wie `<header>`{:.language-html}, `<main>`{:.language-html} und `<footer>`{:.language-html} vorkommen. Man könnte statt `body > *`{:.language-css} natürlich auch `header, main, footer`{:.language-css} selektieren.
Der Breakpoint `44em` im Media-Query ist die Summe aus der maximalen Breite `42rem` und dem Padding links und rechts jeweils `1rem`. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Als *progressive enhancement*{:@en} fügt man im Media-Query noch eine Deklaration hinzu:
~~~CSS
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc( (100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
~~~
Den Wert der *custom property*{:@en} berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
~~~JavaScript
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
~~~
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
☞ [Guckst du Codepen.](https://codepen.io/gunnarbittersmann/pen/BOLqwZ)
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch [feature detection](https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection#answer-29046739) in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit *custom properties*{:@en} nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch `(window.innerWidth - document.documentElement.clientWidth) + 'px'`{:.language-js} schreiben und den Wert nicht per *custom property*{:@en} an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für `document.querySelector('body > header')`{:.language-js}, `document.querySelector('body > main')`{:.language-js} und `document.querySelector('body > footer')`{:.language-js} setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. *Hey, progressive enhancement!*{:@en}
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann