Ich habe derzeit kein Microsoftsystem zum Testen zur Hand, werde aber die Endversion logischerweise auf alles Testen. Daher Danke für deinen Hinweis, da kann ich schonmal vor ab gucken wie ich das später machen werde.
IE User sind ~5% (edge genau so):
https://de.statista.com/statis…tzung-weltweit-seit-2009/
Ich muss mal gucken wie ich das lösen werde. Vielleicht lass ich das CSS vorher mit php generieren, oder schick den IE Leuten einfach eine Handyversion zu.
Ich bastele gerade mit CSS-Variablen herum und habe ein funktionierendes CSS mit einem :root und mediaquerys, die das :root erweitern sollen.
Das funktioniert soweit gut, doch frage ich mich ob das überhaupt valides CSS ist und wenn nicht, wie man valides schreiben kann.
Der CSS Validator spinnt leider bei variablen total rum. Offenbar kennt er sie nicht.
:root {
--menu-rohme-radius-hover: 10px;
[...]
}
@media only screen and (max-width:800px)
{
:root {
--mediahoeg: 150px;
--rohme: 1px solid green;
}
}
@media only screen and (max-width:1200px)
{
:root {
--mediahhoeg: 600px;
--rohme: 1px solid red;
}
}
ps. das eigentliche Problem war eine Menuanimation. Ich habe zum testen ob mein css klappt nur schnell eine neue seite geschrieben, um mit pseudoklassen und hover zu experimentieren.
Mein Problem habe ich nun auch Dank dieses Forums hier gelöst.
zu der Frage nach validem CSS: Das ist ein Glaubenskrieg. Alles hat Vor- und Nachteile und es kommt drauf an, was man erreichen möchte.
CSS2 hat ::pseudoelement. CSS3 supportet :pseudoelement.
Die größte validität ist mit ::after erreicht.
Die größte browser-kompatibilität mit :after.
Das ist zumindest so, wie ich nach meinen 11 Jahren Webentwicklungspause nun herausgefunden habe.
Keyframe vs. transition: Danke für den Hinweis, ich habe gerade mal nachgelesen was der Unterschied zwischen transition und keyframes ist. Hat beides vor und nachteile, hier reicht definitiv eine transition.
Hey,
gibt es irgendwo eine Liste, was die vendor-spezifischen CSS Elemente sind? Ich möchte jetzt keine komplette Browser Doku für jeden einzelnen Browser, sondern nur eine kleine Auflistung wie:
linear-gradient hat -moz und -o als vendor tags
Hintergrund ist einfach das ich meine Seite ein bisschen Rückwärtskompatibel machen möchte und bisher nur die Std CSS Tags benutzt habe.
Ich habe Keyframtes, Transitions, gradient-background box und text-shadows und vieles vieles mehr. Ich kann natürlich annehmen das color: white; und border: 1px solid red; jeweils vendor spezifisch sein können (was bei den tags fast lächerlich wäre), aber das würde den code dann extrem aufblähen.
Oder gibt es eine Faustregel dafür, bei was es etwa vendor-tags gibt?
Um inkompatibilitäten zu vermeiden gehe ich wie im Quellcodebeispiel vor. Das std-tag zum schluss, weil es alles überschreiben würde, wenn es supportet wird. Gibt es bei dieser Annahme Probleme? (mein firefox scheint übrigens lächerlicherweise auf -webkit anzuspringen, wenn ich es alleine benutze. Warum?! Das kommt mir so absurd vor)
Eine Liste welche Vedortags es gibt, habe ich übrigens hier gefunden. -mso (ms office!) etc muss wohl niemand auf einer webseite unterstützen.
https://www.w3.org/TR/CSS21/sy…ml#vendor-keyword-history
Codebeispiel:
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
Hey cool, vielen Dank!!!
Ich saß vorhin ziemlich lang an dem Problem und hab alles mögliche von w3schools gelesen. Ich weiß nicht wie lang ich gebraucht hätte, das rauszufinden!
Und klar, natürlich ist valides css sehr wichtig, danke für den Hinweis. Block benutze ich ebenso in section#innerbody {}. Kompatibilität ist mir sehr wichtig.
ich bin ein bisschen Verwirrt: doe psedoklassen ::after und ::before funktionieren bei mir aus irgend welchen gründen nicht, während :hover selbst funktioniert.
Daran das ich mit "element" ein eigenes html element definiert habe, scheint es nicht zu liegen. Als Klasse mit p.element habe ich es ebenfalls getestet: klappt nicht.
Hat jemand eine Idee woran das liegt?
Danke schonmal im Voraus!
section#innerbody {
[..]
}
section#innerbody element {
border: 1px solid blue;
background-color: #399;
width:400px;
}
section#innerbody element:hover {
border: 4px solid blue;
background-color: #399;
width:400px;opacity: 0.5;
}
section#innerbody element:hover::after {
border: 40px solid blue;
background-color: #899;
width:400px;
animation-duration: 2s;
animation-name: achter;
}
@keyframes achter {
from {
opacity: 1.0;
filter: alpha(opacity=100);
}
to {
opacity: 0.5;
filter: alpha(opacity=50);
}
}