9 useful tips in web development

巴扎黑
Release: 2017-03-19 17:26:26
Original
1361 people have browsed it

In this article, we give 9 useful HTML, CSS and JavaScript tips and tricks that you may often need to use in web development. Several of them are about HTML5 and CSS3, if you are a front-end Developers, then it might be of some use to you.

tips and tricks

1. Use the placeholder attribute of html5

In the past, we often had to write a lot of JavaScript code to implement the function of the placeholder attribute in HTML5. An input box displays a certain prompt message when it does not gain focus, and automatically clears the prompt message when it gains input focus. Browsing of this attribute is currently supported. The browsers include: Opera 11+, Firefox 9+, Safari 5+, IE 10+, but the code provided below is also applicable to browsers that do not support placeholder:

// 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="">
Copy after login

2. Use font face

You can use font face to use some better and unique fonts, supporting most browsers: Opera 11+, Firefox 3+, Safari 5, IE6+

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

3. Box Sizing

Well, I would say this is my favorite CSS property these days. It can solve layout problems. For example, when you add a textfield padding, the width will be the textbox's width + padding, which is annoying and will usually break the layout. However, by using this property, it solves this problem.

Supported browsers: 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+ */
}
Copy after login

4. Disable Textarea size change

Sometimes you don't need the user to change the size of the textarea of ​​the multi-line text input port, but some Webkit-based browsers (such as safari and chrome) allow users to change the textarea size at will. Fortunately, you can disable this feature:

textarea {
    resize: none
}
Copy after login

5.jQuery.trim()

Used to remove spaces before and after a string:

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

6. jQuery.inArray()

Used to determine whether an element is in an array:

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

7. Write a simple jQuery plug-in (template)

//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&#39;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&#39;ll stick to $ (I like dollar sign: ) )      
})(jQuery);
Copy after login

8. Extend the functionality of jQuery selector

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

9. Optimize and reduce PNG image file size

You can reduce the size of PNG files by reducing the number of colors. For details, see PNG file optimization

in conclusion

Front-end development is a very interesting field, and we can never learn everything. Every time I work on a new project, I always feel like I'm discovering something new or strange. I think these tips will be very convenient and useful;)

Original English text: 9-useful-tips-and-tricks-for-web-developers

The above is the detailed content of 9 useful tips in web development. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template