Machen Sie Ihre CSS 3 arbeiten in Web-Browsern
Wenn Sie Ihre Website für den Desktop als auch für das iPhone und iPad sind entwerfen, können Sie immer noch die experimentelle CSS 3 verwenden! Schließlich wird wahrscheinlich die CSS 3 in Ihrer Website unterstützt werden. Das Beispiel in diesem Abschnitt zeigt Ihnen, wie Sie Ihre Wetten für die Zukunft abzusichern.
Für jede der -webkit- Codebeispiele (die geliebte Safari-Versionen 3 und 4 decken), erstellen Sie eine weitere identische CSS-Regel mit -moz- Firefox und eine CSS-Regel zur Deckung der nur mit dem Stammnamen die neuesten Browser zu decken: Opera 10.5, Internet Explorer 9, Safari 5, Chrome und zukünftigen Browsern.
Hier ist ein Beispiel für eine Reihe von Regeln, die die Ecken eines Kastens abzurunden:
-Webkit-border-radius: 12px; / * Saf3-4 * / - moz-border-radius: 12px; / * FF1 + * / border-radius: 12px; / * Opera 10.5, IE 9, Saf5, Chrome * /
Die neue semantische Tags in HTML5 arbeiten gut in Safari auf dem iPhone und iPad, aber nicht in den meisten der älteren Web-Browsern noch gemeinsam auf dem Netz. Um diese neuen Elemente in älteren Browsern funktioniert, alles, was Sie tun müssen, ist die Stil Regeln für anzeigen nach Block die semantischen Tags als Block-Level-Elemente zu definieren. Diese Aktion macht sie wie Tags in älteren Browsern handeln.
Da nicht alle Browser HTML und CSS in der gleichen Art und Weise zu interpretieren, beginnen viele Web-Entwickler Seiten der Gestaltung von Designs erstellen, die beliebige Grenze, Polster zu entfernen, oder die Margen in einem HTML-Tag enthalten, indem Sie einen Stil zu definieren, die diese Werte auf 0 setzt (wie Sie sehen im folgenden Beispiel).
Die Prozesselemente zurückzusetzen, hilft sicherzustellen, dass alle Stile, die Sie erstellen werden in verschiedenen Web-Browsern konsequenter angezeigt werden, da alle Tags mit dem gleichen unbeschriebenes Blatt beginnen. Es ist eine gute Übung für Safari auf dem iPad und iPhone, und für andere Browser.
In diesem Beispiel ist die anzeigen wurde auf Block und gleichzeitig setzen die Rand, Polsterung, und Marge nach 0, eine einheitliche Darstellung in den verschiedenen Web-Browsern zu gewährleisten:
Artikel, beiseite, Footer, Header, Menü, nav, Abschnitt, Details, Tisch, Körper, h1, h2, h3, p, ul, li, {border: 0- margin: 0- padding: 0-Display: block-}