Web Dev Q & A # 2 - PHP-Sitzungen, HTML5-Doktypen und Formularstyling

Wir sind zurück mit dem zweiten Eintrag in der Nettuts + Q & A-Serie. Heute diskutieren wir den Unterschied zwischen LESS und Sass, wie Sie serverseitige Werte an Ihr JavaScript übergeben, wie Sie mit PHP und Cookies arbeiten und wie der HTML5-Doctype ist. Auf geht's!


1. WENIGER und Sass.

Hey Nettuts +. Ich bin verwirrt. Was ist der Unterschied zwischen LESS und Sass? Sind sie gleich??

Es gibt Vorteile, beide zu verwenden. Die Wahrheit ist jedoch: Beide werden die Arbeit wunderbar erledigen. Meistens wird es bevorzugt, wenn es um die Syntax geht. In der Vergangenheit bevorzugten viele LESS, weil sie eine freundlichere CSS-artige Syntax hatte, jedoch seit Sass 3 eine neue Syntax, bekannt als SCSS (Sassy CSS), das ist einfach eine Teilmenge der CSS3-Syntax.

Die Envato-Entwickler verwenden Sass. Andere beliebte Entwickler bevorzugen WENIGER. Ich würde es mit einem Vergleich des 960-CSS-Frameworks mit Blueprint gleichsetzen. Sie sind beide großartig. Also entscheiden Sie sich selbst. Es gibt keine falschen Antworten!

Möchten Sie mehr über LESS auf Nettuts erfahren?+?


2. Server-Seite zu Client-Seite

Ich habe versucht herauszufinden, wie ich den Wert einer PHP-Variablen an mein JavaScript übergeben kann. Wie mache ich das? Vielen Dank!

Die schnellste und einfachste Lösung besteht darin, die gewünschte Variable aus Ihrem JavaScript herauszugeben. Sie können beispielsweise Ihre MySQL-Datenbank mit PHP abfragen und den zurückgegebenen Wert dann an Ihr JavaScript übergeben, indem Sie folgende Schritte ausführen:

      Tut     

3. Benutzerdefinierte Stylesheets mit PHP

Wie kann ich dynamisch ein Farbschema-Stylesheet für meine Website auswählen??

So möchten Sie zum Beispiel wählen red.css, oder blue.css, und das würde ein anderes Farbschema für Ihre Website laden. Meinst Du das? Es gibt sicherlich mehrere Möglichkeiten, um diese Aufgabe zu erledigen, und die richtige Wahl hängt davon ab, ob Sie ein Framework, ein CMS, ein MVC usw. verwenden. Lassen Sie uns die Dinge einfach und so einfach wie möglich halten. Wir können PHP verwenden Sitzungen. Zuerst müssen wir ein hinzufügen wählen In diesem Feld kann der Benutzer das gewünschte Farb-Stylesheet auswählen.

     Tut   

Wählen Sie Ihr Stylesheet

Als Nächstes werden wir mit PHP darauf achten, ob die Seite zurückgeschickt wurde - oder ob die einreichen Schaltfläche wurde angeklickt. Mit einer einfachen Seite wie dieser können wir das Hilfreiche nutzen $ _SERVER ['REQUEST_METHOD'].

Die "Request-Methode" bestimmt, welche Request-Methode für den Zugriff auf die Seite verwendet wurde: 'GET', 'HEAD', 'POST', 'PUT' "

Fügen Sie oben auf Ihrer Seite Folgendes hinzu:

  

Da wir nun bestätigen können, wann die Seite wieder gepostet wurde, können wir eine erstellen Session, und speichern Sie den Wert dessen, was der Benutzer aus dem Auswahlfeld ausgewählt hat.

 

Hier erstellen wir zuerst eine neue PHP-Sitzung mit session_start (). Als Nächstes erstellen wir einen neuen Schlüssel mit $ _SESSION, genannt "color_scheme". Fühlen Sie sich frei, dies zu benennen, wie Sie möchten. Standardmäßig setzen wir dies auf "default" (siehe die "else" -Anweisung). Das heißt, wenn der Benutzer kein Stylesheet ausgewählt hat, verwenden wir das Standard-Stylesheet. Wenn sie jedoch eine Wahl getroffen haben, müssen wir ermitteln, welche Option aus der wählen Element, das sie ausgewählt haben, und speichert es in einem Sitzungsschlüssel.

Zurück zum Markup, werden Sie feststellen, dass wir ein angewendet haben Name von "Farben" an die wählen Element.

 

Wenn die Seite wieder erscheint, wird die ausgewählter Wert von diesem wählen Element wird uns über zur Verfügung stehen $ _POST ['Farben']. Zum Beispiel, wenn ich die "grüne" Option wähle, $ _POST ['Farben'] wird dann gleich "grün" sein.

Ohne Sitzungen und Cookies gibt es keine Möglichkeit, sich an diesen vom Benutzer ausgewählten Wert zu "erinnern". Deshalb sind sie in diesem Fall unerlässlich. Nun das $ _SESSION ['color_scheme'] speichert unseren gewünschten Wert, wir müssen nur das entsprechende Stylesheet laden.

   Tut  

4. Abgerundete Formularelemente

Hallo Nettuts +! Wie erstelle ich abgerundete Eingaben mit CSS für alle Browser??

Sie möchten stilisierte, abgerundete Eingaben in allen Browsern, einschließlich Internet Explorer? Okie Dokie. Betrachten Sie die folgende einfache Markierung:

 

Mit ein paar einfachen CSS3 können wir abgerundete Ecken für diese Eingaben erstellen. Da einige Browser bei der Spezifikation einen Vorsprung hatten, müssen wir die -moz und -Webkit Herstellerpräfixe sowie die offizielle Version der Eigenschaft "border-radius".

 
  • -moz: Mozilla-Browser (Firefox)
  • -Webkit: Webkit-Browser (Safari, Chrome)

Durch die Angabe von aArt Attribut von einreichen, Dieses letzte Snippet zielt nur auf Senden-Schaltflächen ab und wird entsprechend formatiert.

Das verdammte IE

Wie Sie wahrscheinlich schon erraten haben, ist der Internet Explorer leider ein Trottel. Während der kommende IE9 Unterstützung für hat Grenzradius (ohne Präfix) sind die älteren Versionen immer noch ratlos. An diesem Punkt haben Sie zwei Möglichkeiten:

  1. Ignoriere es. Die Welt hört nicht auf, wenn Ihre Leser 90-Grad-Winkel sehen.
  2. Image Fallback. Sie können gezielt auf Internet Explorer zugreifen und ein abgerundetes Hintergrundbild anwenden.

Modernizr

Ich gehe davon aus, dass der Fragesteller dieser Frage Konsistenz erfordert. Also gehen wir mit der zweiten Option. Nehmen wir an, Sie werden in Ihrem Projekt intensiv mit CSS3 und HTML5 arbeiten. In diesem Fall sollten Sie, anstatt ein IE-only Stylesheet zu verwenden, etwas Spaß haben und die hilfreiche Modernizr-Bibliothek verwenden?

Laden Sie zunächst Modernizr herunter und referenzieren Sie die modernizr.js-Datei in Ihrem Projekt.

   Tut  

Als nächstes wenden Sie eine Klasse von an no-js zum Html Element auf Ihrer Seite.

 

Wenn Sie Ihr Projekt im Browser anzeigen, wendet Modernizr eine lange Klassenfolge an Html Element, das genau angibt, wozu Ihr Browser in der Lage ist. Beachten Sie, dass diese Klassenliste natürlich je nach Browser unterschiedlich ist.

Dies ist eine große Hilfe! Jetzt können wir den "Kaskaden" -Effekt verwenden, um nur die Formularelemente zu adressieren, die untergeordnet sind html Element mit einer Klasse von "no-borderradius" und entsprechendem Stil.

Wenn der Browser eine bestimmte Funktion nicht unterstützt, wird der Regel das Wort "Nein" vorangestellt.

 / * Nur für Browser, die keinen Randradius unterstützen * / .no-borderradius input background: url (Pfad / zu / gerundet / Hintergrund / Bild) no-repeat; 

Und dann entspannen wir uns und essen Kuchen.


5. Doktypen

Ich habe festgestellt, dass Sie immer den HTML5-Doctype verwenden. Denken Sie nicht, dass dies gefährlich ist, wenn alle Browser HTML5 noch nicht unterstützen?

Nein, das ist überhaupt nicht gefährlich. Für diejenigen, die mit dem wunderbar einfachen HTML5-Doctype nicht vertraut sind:

 

Ernsthaft… das ist es. Das ist alles dazu. Keine mehrzeiligen Attributreihen mehr; Nur ein normaler DOKTYP - wie es sein sollte. In älteren Browsern wird dieser Doctype sie auslösen Standards-Modus… Und wenn Sie sich immer noch Sorgen machen, beachten Sie, dass sogar Google es verwendet! Brauche mehr? John Resig hat vor 2,5 Jahren darüber gesprochen!

"Das Schöne an diesem neuen DOCTYPE ist vor allem, dass alle aktuellen Browser (IE, FF, Opera, Safari) darauf achten und den Inhalt in den Standardmodus wechseln - auch wenn sie kein HTML5 implementieren. Dies bedeutet, dass Sie dies tun könnten Schreiben Sie Ihre Webseiten noch heute mit HTML5 und lassen Sie sie sehr, sehr lange dauern. "
-John Resig


Lesen Sie die vorherigen Fragen und Antworten

  • # 1: Rückrufe, WENIGER und Floats

Fragen Sie Nettuts +…

Wenn Sie eine "nicht zu komplizierte" Webentwicklungsfrage für uns haben, können Sie:

  1. Senden Sie eine E-Mail an [email protected] und schreiben Sie als Betreff der E-Mail "Web Dev Q & A".
  2. Tweet uns @Nettuts und Hash "#askNettuts".
  3. Hinterlassen Sie einen Kommentar unter "Web Dev Q & A" mit Ihrer neuen Frage.

Danke fürs Lesen und Zuschauen!