Frage von Rodwel, 46

Wie kann man die eigene Hompage für alle Browser kompatibel machen?

Hallo zusammen.

Ich würde gerne meine Hompage für Google Chrome, Internet Explorer, Mozilla Firefox und für den neuen Edge Browser kompatibel machen. Im Netz konnte ich nichts finden.. Kann mir da jemand helfen?

Hier steht der CSS-Code:

@font-face {
    font-family: "inhalt";
    src: url("fonts/Enchanted Land_p.otf");
} 

@font-face {
    font-family: "ueberschrift";
    src: url("fonts/KELMSCOT.TTF")
}

body {
background-color: #000000;
cursor: url(cursor/eyeblue.ani);
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
margin-left: 350px;


}


header {
    color: white;
    height: auto;
    width: 1000px;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    text-align: center;
    background-image: url(bilder/header3.png);
    visibility:visible;
}

.sidebar{
    color: white;
    position: absolute;
    top: 0;
    right: 3;
    margin-top: 200px;
    width: 200px;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    visibility:visible;
}

.sidebar a{
    color: blue;
}

a {
    text-decoration: none;
    color: #000000;
}

#zen-summary{
    margin-bottom: 100px;
    color: #000000;
    background-color: #000000;
    width: 200px;
    float: left;
    height: auto;
    margin-top: 70px;
    margin-left: 300px;
    transform: rotate(10deg);
    clear: right;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease; 
}

#zen-summary:hover {
    -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
    box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
    transition: all 3s ease; 
    color: #FFFFFF;
    padding: 10px 10px 10px 10px;
    visibility:visible;
}

#zen-summary:hover a {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, .75);
    box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, .75);
    transition: all 3s ease; 
    color: #FFFFFF;
    visibility:visible;
}

#zen-preamble{
    background-color: #000000;
    width: 250px;
    height: auto;
    float: right;
    margin-top: 50px;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
   -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease; 
    
}

#zen-preamble:hover {
    -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
    box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
    transition: all 3s ease;
    color: #FFFFFF;
    padding: 10px 10px 10px 10px;
    visibility:visible;
}

#zen-explanation{
    background-color: #000000;
    width: 250px;
    height: auto;
    margin-left: 390px;
    margin-top: 350px;
    -webkit-box-shadow: 0px 0px 15p
Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von nedi23, 35

Ich würde die Webseiten in allen Browsern testen und dann auf einzelne Darstellungsfehler eingehen. Dann könnte dies dir weiterhelfen:

http://www.mediaevent.de/css/browser-praefix.html

Antwort
von abbrechen,

Letztendlich gilt immer: Testen. Öffne deine Seite auf den regulären Browsern schau', ob es Bugs gibt. Musst du dann ebenso mit den verschiedenen Devices machen. Chrome hat zwar im eigenen Dev Tool eine Deviceeinstellung, aber meiner Erfahrung nach funktioniert die nicht.

Die Prefixes kannst du mit dem Autoprefixer von PostCss einfügen, statt es selbst zu machen. Wenn deine Seite fertig ist, copy&paste deinen css Code einfach in einen Autoprefixer im Web. Die einfachste Methode wäre jedoch, PostCss auf deinem Server zu installieren, sofern vorhanden. Bei jeder Kompilierung würde er dann deinen css Code mit Prefixes versehen.

Antwort
von G0lD3Nc0Ld, 30

http://www.w3schools.com/cssref/css3_browsersupport.asp
Hier siehst du was von welchem Browser unterstützt wird ;)

Antwort
von perhp, 18

Also so machst du eine Webseite kompatibel für die wichtigsten Browser:

- Du schreibst erstmal deine ganze Webseite.

- Danach testet du die Webseite in jedem von dir gewünschten Browser und bei eventuelle Fehler, schaust du diese zu lösen, sodass sie aber auch noch in die anderen Browser funktionieren.

Wichtigste Browser sind:

- Chrome

- Firefox

- IE 11/10/9

- safari (nur für mac)

- evtl. noch opera (aber das müsste eigentlich schon passen (wenn chrome bei dir auch passen sollte), da diese auf die gleiche Umgebund basieren)

Keine passende Antwort gefunden?

Fragen Sie die Community