Web Dev Q & A # 2 - PHP Sessioner, HTML5 Doktyp och Form Styling

Vi är tillbaka med den andra posten i Netuts + Q & A-serien. Idag diskuterar vi skillnaden mellan LESS och Sass, hur man skickar värden på serversidan till din JavaScript, hur man arbetar med PHP och cookies och HTML5-doktypen. Nu kör vi!


1. LESS och Sass.

Hej Nätter +. Jag är förvirrad. Vad är skillnaden mellan LESS och Sass? Är de samma?

Det finns fördelar med att använda båda; Men sanningen är: båda kommer att få jobbet fantastiskt. Det blir mest föredraget när det gäller syntaxen och så. Förr i tiden föredrog många många mindre, eftersom de hade en mer användbar CSS-liknande syntax, men av Sass 3 har de en ny syntax, känd som SCSS (Sassy CSS), som helt enkelt är en delmängd av CSS3s syntax.

Envato devs använder Sass. Andra populära utvecklare föredrar mindre. Jag skulle jämföra det med att jämföra 960 CSS-ramverket till Blueprint. De är båda stora; så gör ditt eget sinne. Det finns inga felaktiga svar!

Vill du lära dig mer om MINDRE på Nettuts+?


2. Server-sida till Client-sida

Jag har försökt att räkna ut hur man överför värdet av en PHP-variabel till min JavaScript. Hur gör jag detta? Tack!

Den snabbaste och enklaste lösningen är att echo din önskade variabel från din JavaScript. Du kan till exempel fråga din MySQL-databas med PHP och sedan skicka det returnerade värdet till JavaScript genom att göra något enligt följande:

      Tut     

3. Anpassade stilark med PHP

Hur kan jag välja ett typsnitt för färgschema för min webbplats dynamiskt?

Så du vill till exempel välja red.css, eller blue.css, och det skulle ladda ett annat färgschema för din webbplats. Är det vad du menar? Det finns säkert flera sätt att uppnå den här uppgiften, och det rätta valet kommer att bero på om du använder ramar, CMS, MVC etc. Låt oss hålla sakerna enkla, och så bara ben som möjligt. Vi kan använda PHP sessioner. Först måste vi lägga till en Välj rutan, för användaren att välja önskat färgstilsort.

     Tut   

Välj ditt stilark

Nästa, med PHP, lyssnar vi på om sidan har skrivit tillbaka - eller om Lämna knappen har blivit klickad. Med en enkel sida så här kan vi använda det hjälpsamma $ _SERVER [ 'REQUEST_METHOD'].

"Request Method" bestämmer vilken förfrågningsmetod som användes för att komma åt sidan: "GET", "HEAD", "POST", "PUT" "

Lägg till följande på toppen av din sida:

  

Eftersom vi nu kan bekräfta när sidan har skrivit tillbaka kan vi sedan skapa en session, och lagra värdet av vad användaren valde från väljfältet.

 

Här skapar vi först en ny PHP-session med session_start (). Därefter skapar vi en ny nyckel med $ _SESSION, kallas "color_scheme." Känn fritt att namnge det här du önskar. Som standard ställer vi detta till "standard" (se "annat" -satsningen). Det betyder att om användaren inte har valt ett stilark, använder vi standardversionen. Men om de gjorde ett val måste vi bestämma vilket alternativ från Välj element de valde och lagra det i en sessionstangent.

När du återgår till markeringen hittar du att vi tillämpade en namn av "färger" till Välj element.

 

När sidan inlägg tillbaka, valda värde av detta Välj element kommer att vara tillgängligt för oss via $ _POST [ 'färger']. Till exempel, om jag väljer alternativet "grönt", $ _POST [ 'färger'] kommer då att vara lika med "grön".

Utan sessioner och cookies skulle det inte finnas något sätt att "komma ihåg" det här användardefinierade värdet. Det är därför de är väsentliga i det här fallet. Nu när $ _SESSION [ 'color_scheme'] lagrar vårt önskade värde, vi behöver bara ladda det lämpliga stilarket.

   Tut  

4. Avrundade formelement

Hej Nätter +! Hur skapar jag avrundade formuläringångar med CSS för alla webbläsare?

Så vill du ha stiliserade, rundade ingångar i alla webbläsare, inklusive Internet Explorer? Okej. Tänk på följande enkla mark-up:

 

Med hjälp av en enkel CSS3 kan vi skapa avrundade hörn för dessa ingångar. Eftersom vissa webbläsare har en headstart på spec, måste vi använda -moz och -webkit leverantörs prefix, liksom den officiella versionen av egenskapen "gränsradie".

 
  • -moz: Mozilla-webbläsare (Firefox)
  • -webkit: Webkit webbläsare (Safari, Chrome)

Genom att ange atyp attribut av lämna, det sista snippet kommer endast att rikta in inlämningsknappar och kommer att stämma i enlighet med detta.

Det sprängde IE

Tyvärr, som du antagligen gissade, är Internet Explorer en rycka. Medan den kommande IE9 har stöd för border-radius (utan prefix), är de äldre versionerna fortfarande förlorade. Vid denna tidpunkt har du två val:

  1. Ignorera det. Världen kommer inte att sluta om dina läsare ser 90 graders vinklar.
  2. Bild Fallback. Du kan specifikt rikta dig mot Internet Explorer och tillämpa en rundad bakgrundsbild.

Modernizr

Jag antar att frågaren av denna fråga kräver konsistens; så vi går med det andra alternativet. Låt oss anta att du kommer att arbeta hårt med CSS3 och HTML5 i ditt projekt. I så fall, hellre än att använda ett stilark i IE, varför inte ha det roligt och använd det hjälpsamma Modernizr-biblioteket?

Först ladda ner Modernizr, och hänvisa till modernizr.js-filen i ditt projekt.

   Tut  

Använd sedan en klass av no-js till Html element på din sida.

 

När du tittar på ditt projekt i webbläsaren, kommer Modernizr att tillämpa en lång rad klasser till Html element som specificerar exakt vad din webbläsare kan. Observera att den här klasslistan varierar, beroende på webbläsaren.

Det här är en stor hjälp! Nu kan vi använda "kaskad" -effekten för att bara rikta in de formelement som är barn till html element med en klass av "no-borderradius" och stil i enlighet därmed.

Om webbläsaren inte stöder en viss funktion kommer ordet "nej" att vara prefixat till regeln.

 / * Endast inriktning på webbläsare som inte stöder gränslinjen * / .no-borderradius input bakgrund: url (sökväg / till / avrundad / bakgrund / bild) no-repeat; 

Och sedan slappnar vi av och har tårta.


5. Doktyp

Jag märkte att du alltid använder HTML5-doktypen. Tror du inte att det är farligt, när alla webbläsare inte stöder ännu HTML5?

Nej, det är inte alls farligt. För de som inte är bekanta med den underbart enkla HTML5-doktypen är det:

 

Allvarligt ... det är det. Det är allt som finns där. Inga fler mångfaldiga attribut av attribut bara en plain-ole DOCTYPE - som det borde vara. I äldre webbläsare kommer denna doktyp att utlösa dem till standarder-mode... Och om du fortfarande är orolig, notera att även Google använder det! Behöver mer? John Resig pratade om detta för 2,5 år sedan!

"Vad är trevligt med den här nya DOCTYPE, speciellt är att alla nuvarande webbläsare (IE, FF, Opera, Safari) kommer att titta på det och byta innehåll till standardläge - även om de inte implementerar HTML5. Det betyder att du kan börja skriva dina webbsidor med HTML5 idag och få dem att gå under en mycket, mycket, lång tid. "
-John Resig


Läs tidigare frågor och svar

  • # 1: Återuppringningar, LESS och Floats

Fråga Nettuts + ...

Om du har en "inte-för-komplicerad" webbutvecklingsfråga för oss kan du:

  1. Email [email protected] och skriv "Web Dev Q & A" som ämne i e-postmeddelandet.
  2. Tweet oss @ nettuts, och hash "#askNettuts".
  3. Lämna en kommentar under något "Web Dev Q & A" -post med din nya fråga.

Tack för att du läste och tittade på!