9 conseils utiles en développement Web

Dans cet article, nous donnons 9 trucs et astuces utiles concernant HTML, CSS et JavaScript que vous devrez peut-être souvent utiliser dans le développement Web. Plusieurs d'entre eux concernent HTML5 et CSS3, si vous êtes un développeur front-end, cela pourrait être le cas. certains vous sont utiles.

1. Utilisez l'attribut placeholder de html5

Dans le passé, nous devions souvent écrire beaucoup de code JavaScript pour implémenter la fonction de l'attribut placeholder en HTML5. Une zone de saisie affiche un certain message d'invite lorsqu'elle n'obtient pas le focus et efface automatiquement le message d'invite lorsqu'elle obtient une entrée. focus. La navigation de cet attribut est actuellement prise en charge. Les navigateurs incluent : Opera 11, Firefox 9, Safari 5, IE 10, mais le code fourni ci-dessous est également applicable aux navigateurs qui ne prennent pas en charge l'espace réservé :

// jQuery code
var i = document.createElement("input");
 
// Only bind if placeholder isn't natively supported by the browser
if (!("placeholder" in i)) {
    $("input[placeholder]").each(function () {
        var self = $(this);
        self.val(self.attr("placeholder")).bind({
            focus: function () {
                if (self.val() === self.attr("placeholder")) {
                    self.val("");
                }
            },
            blur: function () {
                var label = self.attr("placeholder");
                if (label && self.val() === "") {
                    self.val(label);
                }
            }
        });
    });
}
 
<!-- html5 -->
<input type="text" name="search" placeholder="Search" value="">

2. Utilisez la police

​Vous pouvez utiliser Font Face pour utiliser des polices meilleures et uniques, prenant en charge la plupart des navigateurs : Opera 11, Firefox 3, Safari 5, IE6

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
     
body {
       font-family: 'MyWebFont', Fallback, sans-serif;
}

3. Dimensionnement de la boîte

Eh bien, je dirais que c'est ma propriété CSS préférée ces jours-ci. Cela peut résoudre des problèmes de mise en page. Par exemple, lorsque vous ajoutez un remplissage de champ de texte, la largeur sera la largeur du remplissage du champ de texte, c'est ennuyeux et cela cassera généralement la mise en page. Cependant, en utilisant cette propriété, cela résout ce problème.

Navigateurs pris en charge : Opera 8.5, Firefox 1, Safari 3, IE8, Chrome 4

textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

4. Désactivez le changement de taille de la zone de texte

Parfois, vous n'avez pas besoin que l'utilisateur modifie la taille de la zone de texte du port de saisie de texte multiligne, mais certains navigateurs basés sur Webkit (tels que Safari et Chrome) permettent aux utilisateurs de modifier la taille de la zone de texte à volonté. , vous pouvez désactiver cette fonctionnalité :

textarea {
    resize: none
}

5.jQuery.trim()

Utilisé pour supprimer les espaces avant et après une chaîne :

$.trim("       a lot of white spaces, front and back!      ");

6. jQuery.inArray()

Utilisé pour déterminer si un élément est dans un tableau :

var arr = [ "xml", "html", "css", "js" ];
$.inArray("js", arr);

7. Écrivez un simple plug-in jQuery (modèle)

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
  
    //Attach this new method to jQuery
    $.fn.extend({
          
        //This is where you write your plugin's name
        pluginname: function() {
  
            //options
            var defaults = {
                option1: "default_value"
            }
             
            var options = $.extend(defaults, options);
  
            //a public method
            this.methodName: function () {
                //call this method via $.pluginname().methodName();
            }
  
            //Iterate over the current set of matched elements
            return this.each(function() {
              
                var o = options;
              
                //code to be inserted here
              
            });
        }
    });
      
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);

8. Étendre les fonctions du sélecteur jQuery

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
 
/******** Usage ********/
 
// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');
  
// Select all ps with classes that contain numbers:
$('p:regex(class,[0-9])');
  
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

9. Optimiser et réduire la taille des fichiers image PNG

Vous pouvez réduire la taille des fichiers png en réduisant le nombre de couleurs. Pour plus de détails, voir Optimisation des fichiers PNG

. Conclusion

Le développement front-end est un domaine très intéressant, et on ne peut jamais tout apprendre. Chaque fois que je travaille sur un nouveau projet, j'ai toujours l'impression de découvrir quelque chose de nouveau ou d'étrange. Je pense que ces conseils seront très pratiques et utiles ;)

Texte original en anglais : 9-trucs-et-astuces-utiles-pour-les-développeurs-web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!