Kann ein Browser einen Css Befehl verstehen?

CSS und andere hilfreiche Anweisungen
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

Auf den ersten Blick eine Methode, um einen Browser zu testen, ob er einen css-Befehl verstehen kann.
Im Chrome/Firefox/Edge/Opera/Handy-Chrome klappt das!
Safari habe ich ja nicht - würde aber einige Probleme lösen!

Der Steuerberater wird zu einem echten Bildungsprojekt :D

Code: Alles auswählen

<script>
if (CSS.supports("background-attachment", "fixed")) { 
    let hinweis = document.getElementById('idStart');
    hinweis.style.backgroundAttachment ='fixed';

}
</script>
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Werner-Zenk.de »

Gefällt mir :tu:
Ich würde da zuerst auf https://caniuse.com/ schauen wer was unterstützt.
Zweitens ob diese Anweisung essenziell für das Script ist oder es andere Möglichkeiten gib die andernfalls verwendet werden können.
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

Die Seite hatte schon jemand im Mobi-Forum genannt, aber sie stimmt leider nicht.
Hier steht, dass bei background-attachment:fixed der Safari auf dem IPhone den Befehlt versteht, aber nichts passiert.
Wäre ja OK, wenn der Hintergrund dann einfach gescrollt würde.
Stimmt aber nicht.
So hatte ich hier https://www.pfrommer-gmbh.de/ den Effekt, dass das Haus-Hintergrundbild in vielfacher Größe auf dem Iphone angezeigt wurde, also nur noch ein Teil des Himmels sichtbar war.
Habe dann mit Tommy zusammen eine recht aufwändige Lösung gebaut.
Ach ja, Du hattest ja das Zeit-Wechselbild dazu gebaut :tu:
IPhoneErr.jpeg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5776
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Tommy Herrmann »

Moin,

da ich mich mit JavaScript immer sehr schwer tue - meine Frage - wozu soll das denn eigentlich gut sein?

Da kannst Du doch auch gleich die CSS schreiben:

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Ist denn da ein Unterschied, ob ich die CSS direkt an das JavaScript schreibe oder eben als Style-Anweisung?

Ich hatte damals beides versucht - beides geht am iPhone oder eben auch nicht. Hier mit der CSS direkt an das JavaScript geschrieben:

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
 let heute = new Date();
 let stunde = heute.getHours();
 let bild = `images/nachts.jpg`;
 if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
 if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
 if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
 if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
 document.getElementById("bild").style = `
 background-image: url(${bild});
 content: ' ';
 display: block;
 background-position: center;
 background-size: cover;
 height: 100vh;
 width: 100vw;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 position: fixed;
 z-index: 0;
 `;
</script>

Denn nur die CSS Anweisung:

background-attachment: fixed;

... kann der Safari am iOS eben nicht interpretieren, ebenso auch nicht am MacOS.

Es gibt Hunderte von Beispielen bei denen das iPhone nur Müll anzeigt. Es ist unglaublich, dass das nicht endlich mal den CSS3 Anweisungen angepasst wird. Man kann schon deswegen eigentlich kein iPhone verwenden. Wieso erwartet Apple, dass sich die gesamte CSS mit Workarounds auf ihre komischen Geräte anpasst, anstatt endlich mal ihre Geräte an den Standard anzupassen. Auf der Seite "caniuse.com" (Can I Use / kann ich benutzen) wird das ja auch beschrieben:


background-attachment fixed.jpg



Das hatte ich auch zusätzlich hier bewiesen. Hier kann man das Problem ganz genau sehen:

https://www.mobirise-tutorials.com/Busi ... xiert.html

Auf dieser Seite ist nur das oberste Hintergrundbild am iPhone fixiert und korrekt dargestellt, die anderen nicht. Die anderen Bilder werden teilweise vollkommen korrupt und in falscher Größe am iPhone dargestellt.

Wer kein iPhone hat, kann das hier sehr genau testen. Achtung begrenzte Testzeit pro E-Mail Adresse, dann wollen sie Geld - diese Testseite also möglichst kurz geöffnet lassen:

https://app.lambdatest.com/console/realtime/browser

Auf meiner zweiten Seite steht nur die CSS des obersten Header-Blocks direkt im Block auf der Seite (kein JavaScript), sodass dieses Bild auch am iPhone fixiert und korrekt angezeigt wird:

Code: Alles auswählen

div::before {
  content: ' ';
  display: block;
  background-image: url('https://www.mobirise-tutorials.com/Kette.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

Moin nach Berlin!
Nicht so lange Styles, sowas mag Google gar nicht.
Jeder Test mault zu viel Styles an - ob es nun stimmt, ist eine andere Sache.

Ich habe auf irgendeiner Seite übrigens eine vor Arroganz triefende kurze Stellungsnahme von Apple zum Thema css3 und fixed und so gelesen, die nur sagt, dass sich Apple noch nie was hat vorschreiben lassen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5776
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Tommy Herrmann »

... die paar Zeilen sind doch kein langer Style :eek:

Die meisten Tests maulen auch prinzipiell, denn sonst müsste sie ja keiner verwenden und man würde kein Geld mit Werbung verdienen :D

Dann gucke Dir mal die Google eigenen Styles an oder auch die von Bootstrap - das sind lange Style-Anweisungen.

... na ja - und diese Arroganz von Apple spiegelt sich dann auch im Verhalten der Verbraucher wieder. Seit dem Jahr 2011 hat sich der Anteil von Android gegenüber iOS fast verdreifacht. Der Marktanteil von iOS ist in dieser Zeit jedoch praktisch gleich geblieben.

Das Betriebssystem "Android" hat einen Marktanteil von ca. 72% und "iOS" gerade mal 27%.


iOS vs Android.jpg


... auch der Anteil der Verkaufszahlen von iPhone vs Samsung Smartphones hält sich ziemlich die Waage.


iOS vs Samsung Smartphone-Anteil.jpg


Quelle: statista.com

https://www.statista.com/statistics/272 ... ince-2009/


Ich habe diesen Hype auf die iPhones noch nie verstanden, zumal deren iCloud eigentlich so ziemlich alles klaut was man klauen kann und ohne die iCloud das iPhone eigentlich nicht funktioniert. Apple ist für meine Begriffe der größte Datenklauer, den es gibt.
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

By the way: wir hatten doch diesen Hype wegen Google-Fonts auch hier.
Wie ist das denn bei Autos?
Habe gestern irgendeine Elektroauto-Werbung im Fernsehen gesehen: "powered by Google" oder "inklusive Google".
Irgendwie finde ich das alles ziemlich schwachsinnig....
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5776
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Tommy Herrmann »

Na ja - eine der vielen Antworten auf "Tesla" - war das nicht "Volvo"?

https://www.volvocars.com/intl/v/connec ... nment-page

... eigentlich klar - dass dieser Markt sehr interessant ist.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Sa 11. Mär 2023, 04:18 Moin,

da ich mich mit JavaScript immer sehr schwer tue - meine Frage - wozu soll das denn eigentlich gut sein?

Da kannst Du doch auch gleich die CSS schreiben:
Stell dir mal vor, es gibt noch mehr JS-Variablen. Zum Beispiel eine die je nach Tageszeit einen anderen Rahmen (oder was auch immer) hinzufügt / ändert, dann hast du mit der JS-Style-Anweisung schon die Grundlage, um das zu realisieren.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5776
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

ja - das ist mir schon ganz klar, da hat JavaScript ja sein Stärken.

Es ging doch jetzt aber erst einmal darum,welche CSS das iPhone bzw. Apple "versteht" und nicht darum irgendwelche zusätzlichen Anweisungen zu programmieren.

Das Problem ist doch hier, dass das iPhone den Hintergrund so nicht fixieren kann und dass diese CSS Anweisungen am iPhone eben nicht funktionieren.

... nicht als CSS-Anweisung:

background-attachment: fixed;

... und auch nicht als Style am JavaScript:

hinweis.style.backgroundAttachment ='fixed';

Das wird ja auch nicht dadurch geändert, dass ich die Style-Anweisung an ein JavaScript schreibe.

Beides funktioniert nicht am iPhone.

Dazu benötigt es eine andere CSS nur für das iPhone - eben z.B. diese (unten). Der Nachteil ist aber enorm, denn mit dieser CSS kann ich immer nur 1 Hintergrundbild auf der gleichen Seite fixieren, denn das nimmt durch diese fixierte Position ja die gesamte Höhe der Seite in Anspruch und nicht nur die Höhe vom verwendeten Container:

Code: Alles auswählen

div::before {
  content: ' ';
  display: block;
  background-image: url('https://www.mobirise-tutorials.com/Kette.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}

Um einen Parallax-Effekt zu erzielen wird gerne und sehr häufig der Hintergrund fixiert - eben mit der CSS-Anweisung:

background-attachment: fixed;

... und das geht nicht. Also eben auch nicht in mehreren Containern der gleichen Seite, sodass sich mehrere Parallax-Bilder ineinander schieben können. Das geht am iPhone nicht - an jedem anderen System schon.

Genau deswegen habe ich diese Seite von mir genau so erstellt:

https://www.mobirise-tutorials.com/Busi ... xiert.html

Nur das oberste Hintergrundbild mit dem Schekel funktioniert am iPhone. Alle anderen, weiteren fixierten Hintergrundbilder auf dieser Seite von mir sind am iPhone restlos korrupt.

Nicht nur, dass der Hintergrund nicht fixiert wird, sondern das Betriebssystem iOS vom iPhone stellt das Hintergrundbild dann auch noch restlos korrupt und viel zu groß dar. Jeder der diesen CSS-Befehl verwendet, lässt seine Seite am iPhone schrecklich und unbrauchbar aussehen.

https://julia-vicentini.de/blog/backgro ... orkaround/

Das einzige was Apple dazu zu sagen hat, ist dass es ihnen vollkommen egal ist was andere Betriebssysteme darstellen, bei ihrem ist das eben so. Sie wissen also um dieses Manko und tun absichtlich nichts dagegen.
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

Daher fing ich ja oben an mit der Abfrage "kann mein Browser diesen css-Befehl?"
Dann soll der Browser das fixed durchführen, sonst eben nicht. Da fixed ja ggf. auch Fehler verursacht.
Der Rudy Boegemans / Zen2Cool hat da was geniales zu geschrieben, mit dem man auch mehrere fixed-Bereiche erstellen kann.
Ist in der Witsec-Design-Block Galerie und wird auch hier angewendet
https://www.afripix-web.de/webdesign-gu ... h-eier.php

Aber das nur so am Rande, darum geht es ja hier nicht
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5776
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von Tommy Herrmann »

Ja - das habe ich verstanden - aber angeblich wird ja "background-attachment: fixed" vom iOS supportet - nur nicht dargestellt :crying: :angst:

Geht und funktioniert dieses JavaScript denn tatsächlich am iPhone?
stobi_de
Moderator
Moderator
Beiträge: 739
Registriert: Di 11. Okt 2022, 06:30

Re: Kann ein Browser einen Css Befehl verstehen?

Ungelesener Beitrag von stobi_de »

Rudy hat es getestet.
Das fixed führt übrigens im IOS immer noch zu einer falschen Darstellung, d-h- das Bild ist vielfach vergrößert
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast