Share
Nous sommes de retour avec la deuxième entrée de la série Nettuts + Q & A. Aujourd'hui, nous discutons de la différence entre LESS et Sass, comment passer des valeurs côté serveur à votre JavaScript, comment travailler avec PHP et les cookies, et le doctype HTML5. Et c'est parti!
Hey Nettuts +. Je suis confus. Quelle est la différence entre LESS et Sass? Sont-ils les mêmes?
Il y a des avantages à utiliser les deux. Cependant, la vérité est la suivante: les deux vont faire le travail à merveille. Cela devient surtout un cas de préférence, en ce qui concerne la syntaxe, etc. Dans le passé, beaucoup préféraient LESS, car sa syntaxe était plus conviviale que celle de CSS, bien qu’à partir de Sass 3, ils aient une nouvelle syntaxe, appelée SCSS (Sassy CSS), qui est simplement un sous-ensemble de la syntaxe de CSS3.
Les développeurs Envato utilisent Sass. D'autres développeurs populaires préfèrent MOINS. Cela équivaudrait à comparer le framework 960 CSS à Blueprint. Ils sont tous les deux géniaux. alors décidez-vous. Il n'y a pas de mauvaise réponse!
Vous voulez en savoir plus sur LESS on Nettuts+?
J'ai essayé de comprendre comment passer la valeur d'une variable PHP à mon code JavaScript. Comment puis-je faire cela? Merci!
La solution la plus rapide et la plus simple consiste à faire écho à votre variable souhaitée dans votre code JavaScript. Par exemple, vous pouvez interroger votre base de données MySQL avec PHP, puis transmettre la valeur renvoyée à votre code JavaScript en procédant comme suit:
Tut
Comment choisir une feuille de style de jeu de couleurs pour mon site Web de manière dynamique?
Donc, vous voulez, par exemple, choisir red.css, ou blue.css, et cela chargerait un jeu de couleurs différent pour votre site Web. Est-ce ce que vous voulez dire? Il y a certainement plusieurs façons d'accomplir cette tâche, et le choix correct dépendra de l'utilisation d'un framework, d'un CMS, d'un MVC, etc. Restons simples, et aussi simples que possible. Nous pouvons utiliser PHP sessions. Premièrement, nous devons ajouter un sélectionner boîte, pour que l'utilisateur choisisse la feuille de style de sa couleur désirée.
Tut Choisissez votre feuille de style
Ensuite, avec PHP, nous écouterons si la page a été renvoyée - ou si le Soumettre bouton a été cliqué. Avec une simple page comme celle-ci, nous pouvons utiliser le utile $ _SERVER ['REQUEST_METHOD'].
La "méthode de requête" détermine la méthode de requête utilisée pour accéder à la page: 'GET', 'HEAD', 'POST', 'PUT' "
En haut de votre page, ajoutez ce qui suit:
Puisque nous pouvons maintenant confirmer le moment où la page a été postée, nous pouvons créer un session, et stocker la valeur de ce que l'utilisateur a choisi dans la zone de sélection.
Ici, nous créons d’abord une nouvelle session PHP, avec session_start (). Ensuite, nous créons une nouvelle clé, avec $ _SESSION, appelé "color_scheme". N'hésitez pas à nommer cela comme vous le souhaitez. Par défaut, nous définissons cette option sur "default" (voir l'instruction "else"). Cela signifie que si l'utilisateur n'a pas sélectionné de feuille de style, nous utiliserons celle par défaut. Cependant, s’ils ont fait un choix, nous devons déterminer quelle option parmi les sélectionner élément qu'ils ont choisi et le stocker dans une clé de session.
En revenant à la marge, vous constaterez que nous avons appliqué un prénom de "couleurs" à la sélectionner élément.
Lorsque la page est postée en arrière, le valeur sélectionnée de cela sélectionner élément sera disponible pour nous, via $ _POST ['couleurs']. Par exemple, si je choisis l'option "verte", $ _POST ['couleurs'] sera alors égal à "vert".
Sans sessions et cookies, il n'y aurait aucun moyen de "se souvenir" de cette valeur sélectionnée par l'utilisateur. C'est pourquoi ils sont essentiels dans ce cas. Maintenant que $ _SESSION ['color_scheme'] stocke la valeur désirée, il suffit de charger la feuille de style appropriée.
Tut
Salut Nettuts +! Comment créer des entrées de formulaire arrondies avec CSS pour tous les navigateurs?
Vous voulez donc des entrées stylisées et arrondies dans tous les navigateurs, y compris Internet Explorer? Oki Doki. Considérez le balisage simple suivant:
En utilisant du CSS3 simple, nous pouvons créer des angles arrondis pour ces entrées. Certains navigateurs ayant une longueur d'avance sur la spécification, nous devons utiliser la -moz et -webkit les préfixes de vendeurs, ainsi que la version officielle de la propriété "border-radius".
En spécifiant un
typeattribut desoumettre, ce dernier extrait ciblera uniquement les boutons d'envoi et sera stylé en conséquence.
Malheureusement, comme vous l'avez probablement deviné, Internet Explorer est un imbécile. Alors que le prochain IE9 prend en charge rayon de la frontière (sans préfixe), les anciennes versions sont toujours perdues. À ce stade, vous avez deux choix:
Je suppose que le demandeur de cette question a besoin de cohérence; Nous allons donc avec la deuxième option. Supposons que vous allez travailler énormément avec CSS3 et HTML5 dans votre projet. Dans ce cas, plutôt que d’utiliser une feuille de style exclusivement IE, pourquoi ne pas s’amuser et utiliser la bibliothèque utile Modernizr?
Commencez par télécharger Modernizr et référencez le fichier modernizr.js dans votre projet..
Tut
Ensuite, appliquez une classe de non-js au Html élément sur votre page.
Lorsque vous visualisez votre projet dans le navigateur, Modernizr appliquera une longue chaîne de classes au Html élément, qui spécifie exactement ce que votre navigateur est capable de. Notez que, évidemment, cette liste de classes variera en fonction du navigateur..
C'est d'une grande aide! Nous pouvons maintenant utiliser l’effet "en cascade" pour ne cibler que les éléments de formulaire enfants du html élément avec une classe de "no-borderradius" et style en conséquence.
Si le navigateur ne prend pas en charge une fonctionnalité particulière, le mot "non" sera préfixé de la règle..
/ * Ne cible que les navigateurs ne prenant pas en charge border-radius * / .no-borderradius input background: url (chemin / à / arrondi / fond / image) no-repeat;
Et puis on se détend et on mange.
J'ai remarqué que vous utilisiez toujours le doctype HTML5. Ne pensez-vous pas que c'est dangereux, quand tous les navigateurs ne supportent pas encore HTML5?
Non, ce n'est pas dangereux du tout. Pour ceux qui ne connaissent pas le doctype merveilleusement simple de HTML5, c'est:
Sérieusement… c'est tout. C'est tout ce qu'on peut en dire. Plus de querelles d'attributs multilignes; juste un simple DOCTYPE - comme il se doit. Dans les anciens navigateurs, ce doctype les déclenchera mode standard… Et si vous êtes toujours inquiet, notez que même Google l'utilise! Besoin de plus? John Resig en parlait il y a deux ans et demi!
"Ce qui est bien avec ce nouveau DOCTYPE, en particulier, c'est que tous les navigateurs actuels (IE, FF, Opera, Safari) l'examineront et basculeront le contenu en mode standard, même s'ils n'implémentent pas le HTML5. Cela signifie que vous pouvez commencez à écrire vos pages Web à l’aide de HTML5 aujourd’hui et laissez-les durer très longtemps. "
-John Resig
Si vous avez une question de développement Web "pas trop compliquée" pour nous, vous pouvez:
Merci d'avoir lu et regardé!
Accentsconagua