Share
We zijn terug met het tweede item in de Nettuts + Q & A-serie. Vandaag bespreken we het verschil tussen LESS en Sass, hoe u server-side waarden doorgeeft aan uw JavaScript, hoe u met PHP en cookies werkt, en het HTML5-doctype. Daar gaan we!
Hey Nettuts +. Ik ben in de war. Wat is het verschil tussen LESS en Sass? Zijn ze hetzelfde?
Er zijn voordelen aan het gebruik van beide; De waarheid is echter: beide zullen de klus prachtig gedaan krijgen. Het wordt meestal een geval van voorkeur, als het gaat om de syntaxis en dergelijke. In het verleden gaven velen de voorkeur aan LESS, omdat het een vriendelijkere CSS-achtige syntaxis had, maar vanaf Sass 3 hebben ze een nieuwe syntaxis, bekend als SCSS (Sassy CSS), dat is gewoon een deelverzameling van de syntaxis van CSS3.
De Envato-ontwikkelaars gebruiken Sass. Andere populaire ontwikkelaars geven de voorkeur aan LESS. Ik zou het gelijkstellen aan het vergelijken van het 960 CSS-framework met Blueprint. Ze zijn allebei geweldig; dus verzin je eigen gedachten. Er zijn geen foute antwoorden!
Wilt u meer weten over LESS op Nettuts+?
Ik heb geprobeerd om erachter te komen hoe ik de waarde van een PHP-variabele kan doorgeven aan mijn JavaScript. Hoe doe ik dit? Bedankt!
De snelste en gemakkelijkste oplossing is om uw gewenste variabele vanuit uw JavaScript te echoën. U kunt bijvoorbeeld uw MySQL-database opvragen met PHP en vervolgens de geretourneerde waarde aan uw JavaScript doorgeven door iets te doen in de trant van:
Tut
Hoe kan ik een kleurenschema-stylesheet voor mijn website dynamisch kiezen?
Dus je wilt, bijvoorbeeld, kiezen red.css, of blue.css, en dat laadt een ander kleurenschema voor uw website. Is dat wat je bedoelt? Er zijn zeker verschillende manieren om deze taak te volbrengen, en de juiste keuze zal afhangen van of je een framework, een CMS, MVC, enz. Gebruikt. Laten we de dingen eenvoudig en zo kaal mogelijk houden. We kunnen PHP gebruiken sessies. Eerst moeten we een toevoegen kiezen vak, voor de gebruiker om hun gewenste kleuren stylesheet te kiezen.
Tut Kies uw stylesheet
Vervolgens zullen we met PHP luisteren of de pagina is teruggeplaatst - of als de voorleggen knop is geklikt. Met een eenvoudige pagina zoals deze kunnen we het behulpzame gebruiken $ _SERVER [ 'REQUEST_METHOD'].
De "Verzoekmethode" bepaalt welke aanvraagmethode werd gebruikt om toegang tot de pagina te krijgen: 'GET', 'HEAD', 'POST', 'PUT' "
Voeg het volgende toe boven aan uw pagina:
Omdat we nu kunnen bevestigen wanneer de pagina is teruggeplaatst, kunnen we vervolgens een sessie, en bewaar de waarde van wat de gebruiker heeft gekozen uit het selectievak.
Hier maken we eerst een nieuwe PHP-sessie, met session_start (). Vervolgens maken we een nieuwe sleutel, met $ _SESSION, genaamd "color_scheme." Voel je vrij om dit te noemen zoals je wilt. Standaard zetten we dit op "standaard" (zie de verklaring "else"). Dit betekent dat als de gebruiker geen stylesheet heeft geselecteerd, we de standaardstijl zullen gebruiken. Als ze echter een keuze hebben gemaakt, moeten we bepalen welke optie uit de kiezen element dat ze hebben gekozen, en sla het op in een sessiesleutel.
Terugkomend op de mark-up, zult u merken dat we een hebben toegepast naam van "kleuren" voor de kiezen element.
Wanneer de pagina wordt weergegeven, de geselecteerde waarde van dit kiezen element zal beschikbaar zijn voor ons, via $ _POST [ 'kleuren']. Bijvoorbeeld als ik de "groene" optie kies, $ _POST [ 'kleuren'] zal dan gelijk zijn aan "groen".
Zonder sessies en cookies zou er geen manier zijn om deze door de gebruiker geselecteerde waarde te "onthouden". Dat is waarom ze essentieel zijn in dit geval. Dat $ _SESSION [ 'color_scheme'] bewaart onze gewenste waarde, we hoeven alleen het juiste stylesheet te laden.
Tut
Hallo Nettuts +! Hoe maak ik afgeronde formulierinvoer met CSS voor alle browsers?
Dus u wilt gestileerde, afgeronde invoer in alle browsers, inclusief Internet Explorer? Okie Dokie. Overweeg de volgende eenvoudige verhoging:
Met behulp van enkele eenvoudige CSS3 kunnen we afgeronde hoeken maken voor die invoer. Omdat sommige browsers een voorsprong hebben op de specificatie, moeten we de -moz en -webkit voorvoegsels van leveranciers, evenals de officiële versie van de eigenschap "grensradius".
Door een
typekenmerk vanvoorleggen, dat laatste fragment zal alleen submit-knoppen targeten, en zal overeenkomstig stylen.
Helaas, zoals u waarschijnlijk al vermoedde, is Internet Explorer een eikel. Terwijl de komende IE9 ondersteuning biedt border-radius (zonder een voorvoegsel), zijn de oudere versies nog steeds verliesgevend. Op dit moment heb je twee keuzes:
Ik neem aan dat de vragensteller van deze vraag consistentie vereist; dus we gaan met de tweede optie. Laten we aannemen dat je zwaar gaat werken met CSS3 en HTML5 in je project. In dat geval, in plaats van het gebruik van een alleen-IE-stylesheet, waarom geen plezier hebben, en gebruik de behulpzame Modernizr-bibliotheek?
Download eerst Modernizr en verwijs naar het bestand modernizr.js in uw project.
Tut
Voeg vervolgens een klasse toe van no-js naar de html element op uw pagina.
Wanneer u uw project in de browser bekijkt, zal Modernizr een lange reeks klassen toepassen op de html element, dat precies aangeeft waar uw browser toe in staat is. Merk op dat, uiteraard, deze lijst met klassen zal variëren, afhankelijk van de browser.
Dit is een enorme hulp! Nu kunnen we het 'cascade'-effect gebruiken om alleen de formulierelementen te targeten die kinderen zijn van de html element met een klasse van "no-borderradius" en dienovereenkomstig stijl.
Als de browser een bepaalde functie niet ondersteunt, wordt het woord 'nee' als voorvoegsel voor de regel gebruikt.
/ * Richt alleen browsers die geen grensradius * / .no-borderradius-invoer background: url (pad / naar / afgerond / achtergrond / afbeelding) no-repeat;
En dan ontspannen we en hebben we cake.
Ik heb gemerkt dat je altijd het HTML5-doctype gebruikt. Denk niet dat dat gevaarlijk is, wanneer alle browsers HTML5 nog niet ondersteunen?
Nee, het is helemaal niet gevaarlijk. Voor degenen die niet vertrouwd zijn met het wonderbaarlijk eenvoudige HTML5-doctype, is het:
Serieus ... dat is alles. Dat is alles wat er is. Geen meerregelige spats van attributen; gewoon een gewoon-OLE DOCTYPE - zoals het hoort. In oudere browsers zal dit doctype ze activeren standaard-modus... En als u zich nog steeds zorgen maakt, merk dan op dat zelfs Google het gebruikt! Heb meer nodig? John Resig had het hier 2,5 jaar geleden over!
"Wat aardig is aan deze nieuwe DOCTYPE, is dat alle huidige browsers (IE, FF, Opera, Safari) ernaar kijken en de inhoud in de standaardmodus veranderen - ook al implementeren ze HTML5 niet. begin vandaag met het schrijven van webpagina's met HTML5 en laat ze heel, heel, heel lang mee. "
-John Resig
Als u een "niet al te ingewikkelde" webontwikkelingvraag voor ons heeft, kunt u:
Bedankt voor het lezen en kijken!
Accentsconagua