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.
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="">
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: '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; }
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+ */ }
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 }
Used to remove spaces before and after a string:
$.trim(" a lot of white spaces, front and back! ");
Used to determine whether an element is in an array:
var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr);
//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);
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)');
You can reduce the size of PNG files by reducing the number of colors. For details, see PNG file optimization
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!