CSS engineering
Usually only a few color pages, these colors will be used everywhere, or some styles (such as the flexible pouch, fixed location, etc.)
Also used everywhere, so that we had to go around writing these duplicate code. Once the day's Web site revision, the color
Is changed, the code changes is very large.
These problems encountered in CSS, if placed in the back-end development area, is unimaginable. The reason for not prone to back-end development
Such a problem, because the rear end of the variety of technical means to solve the problem (functions, classes, modules, etc.). Now, the front end of fast
Rate rise, it also brings a solution to these problems.
This article discusses the "CSS engineering" is to use back-end development of thinking to solve problems encountered in the front.
CSS compiler
CSS compiler to write code, also known as CSS preprocessor means developers to use a sort of CSS (but not actually) language, and then by the compiler, compile the code into CSS browser can really perform.
Current common CSS compiler has: SASS and LESS. This article has been most commonly used SASS, for example, to explain how to use SASS to achieve elegant simplicity of CSS code.
SASS Although the code and CSS code looks like, but in fact, careful observation, it is not the language of CSS (CSS may not variable), but it is made with SASS written language.
This code can not identify the browser because the browser does not know SASS code.
Therefore, the use of SASS compiler to compile, it will be our SASS code into CSS code
SASS installation
SASS compiler is written in a language obtained by use of Ruby, therefore, dependent Ruby SASS execution environment. Fortunately, we do not need for cumbersome steps to install and configure Ruby, direct installation tools Koala to a third party.
Koala is a pre-compiler tool set built several front end of SASS, LESS precompiler like, and provides a graphical user interface.
Preparation work
Create a new folder, and use your favorite text editor to open (for example VSCode), and then create a new file in the folder css
Folder for storing files and SASS CSS file, and then create an index.html file in the root directory.
Code written in SASS
Create a new file in index.scss css file, note the suffix .scss, it indicates that this is a language to use Sass CSS
Documents prepared.
sass language is supported // comments.
Compile
Well SASS we write the code, now it needs to be compiled into the browser can identify the CSS code.
Now, open Koala installed, your project folder and drag Koala's main interface.
At this point, if nothing else, your VSCODE have been generated corresponding CSS file and a Map file.
SASS development is so simple to use, not only that, as long as you do not close Koala, after any changes you make to index.scss file, it will automatically compile directly to index.css in.
Then the map file is doing with it? This is an indication of files and file SASS CSS file mapping the way, if you are a beginner, simply put, it is useless. You can set the Koala and let it do not generate this file.
Compiler Options
Koala offers a variety of compiler options available for configuration, introduced two here:
1. Autoprefix automatic prefix
Select this option at compile time, you will automatically have a browser compatibility issue of property plus the firm prefix.
2. compressed compression mode
Select this option at compile time, the generated code will be compressed to a minimum file size.
variable
An important feature of sass let people benefit is that it introduces a variable css. You can re-use the css property value is defined as the change
Amount, then they are referenced via variable names without re-writing the property value. Or, using only the value of a property over time, you can give it a variable name easy to understand, people know at a glance the use of the property value.
sass use the $ symbol to identify variables.
Variable declaration
Disclaimer sass css variables and attributes like: $ highlightcolor: # F90; this means that the variable $ highlightcolor
Now the value is # F90. Any assignment can be used as a css property values can be used as a variable value sass, and even is a space-separated
A plurality of attribute values, such as $ basic-border: a plurality of attribute values 1px solid black ;, or separated by commas, such as
$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati
on Sans","sans-serif";
Nested properties
In sass in addition to CSS selectors, attributes may be nested. Although the property involved in the preparation of written selector repeat unlike so bad, but to repeatedly write border-style, border-width, border-color and border- *, etc. are also very annoying. In sass, you only need to write it again knock border
Simple mixer
For example, if your site requires extensive use of the flexible pouch (often the case), and the resilient cartridge have common characteristics (such as the need wrapping ends aligned, etc.), each time you need not write code deduplication using a mixer can help you write only once code like this:
@mixin flex-container{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
Mixer parameter passing
Gotta mixer does not necessarily generate the same style. Parameters passed to the mixer through at @include mixer, the mixer to customize the precise pattern generated. When @include mixer parameters in fact, can be assigned to a variable css property value. If you touch function, with the function this way is very similar:
Resolve browser compatibility issues
The so-called browser compatibility issues, refer to different browsers have different resolutions on the same piece of code, resulting in the page display
The result is not uniform situation. In most cases, our demand is that any user with a browser to view our network
Station or visit our system should be unified display. So browser compatibility issues are front-end development
Personnel often encounter problems and need to be addressed.
The root cause browser compatibility issues, the browser kernel is different due.
Awareness browser kernel
"Browser kernel" also known as "engine" can be roughly translated as "rendering engine", but we generally call "browser kernel." We write the HTML and CSS code, reason can be identified and the browser to render on the page, it is as the kernel.
Common browser kernel as follows:
The type of browser JS engine core
IE Trident JScript
Firefox Gecko TraceMonkey
Chrome WebKit,Blink V8
Safari WebKit SquirrelFish Extreme
Opera Presto way
Use CSS Hack resolve compatibility issues:
The browser may encounter some of the code is not recognized in the reading CSS code, this phenomenon usually two reasons:
1. The code itself has problems, such as: bg: red, bg is not a valid attribute css
2. Code no problem, but the browser kernel does not recognize, such as: box-sizing: border-box, this code is not itself
There are problems, but is due to the use of CSS3 properties box-sizing, will result in some low-free version of the kernel of the browser
Law recognized.
In short, when the browser encounters these unrecognized code, which will be how to do it? Unlike java, C # and other back-end language, the browser does not suspend the implementation of the program, it will immediately skip these unrecognized codes, I did not see it as the same, continue to implement the code behind
Summarize some browsers these two features:
1. different browser kernel can recognize their own unique CSS properties
2. The browser encounters an unrecognized CSS properties, will skip
It is this feature of the browser, compatible to our resolve browser compatibility issues opened up a channel. The CSS Hack skills
Surgery, is through writing something that makes browser-specific identification code to solve compatibility issues.
For example, when we encounter some CSS properties may cause browser compatibility issues, can be written by this model:
.hack{
opacity: .5; / * if not recognized Liu, skips line * /
filter: alpha (opacity = 50); / * for IEs, if unrecognized, would skip this line * /
-moz-opacity: .5; / * for older versions of Firefox, if not recognized, will skip this line * /
-khtml-opacity: .5; / * for older versions of Safari, if not recognized, will skip this line * /
}
Asymptotic enhancement and graceful degradation
Because we need to adapt to different types of pages, and browsers with different versions of the model.
With so many browsers, even if the use of Hack technology, we can not guarantee that all of the styles can be applied to a normal browser
In, for example, you can not apply to the animation in IE5.
If your project need to consider those older versions of the browser, you will face difficulties above.
How to handle it?
Our general idea is: page in a new version of the browser you want to apply the new effect; page in the older version of the browser can not
The new results, but do not layout disorder.
These are the general idea, but when faced with different projects may have different emphases. For example, government websites generally focused considered old
Version of the browser (you do not understand the world of civil servants); and the project will focus on Internet applications to consider a new version of the browser.
For a different focus, so there are two kinds of static pages of the development of ideas, they are asymptotically enhanced (progressive
enhancement) and graceful degradation (graceful degradation).
Progressive enhancement means: build pages, to ensure the most basic functions for the low version of the browser, and then for the advanced browser
Effects, interactive and other improvements and additional functionality to achieve a better user experience.
Graceful degradation means: start to build fully functional, and then the low version compatible for browsers.
The difference is that:
Graceful degradation to the new version of the browser as the goal, from the beginning of the status quo, and for the lower versions of the browser, gradually reduce the user experience
supply.
Progressive enhancement to older browsers as the goal, from a very basic, capable of functioning version, and continue to expand
Charge, in order to meet the needs of the new version of the browser.
Downgrade (graceful degradation) means looking back; and progressive enhancement means looking ahead, while ensuring its roots in a safe place
band.
On code style, graceful degradation will give priority to writing a new standard properties to adapt to the new version of the browser, and then to add the older version Liu
Writing in the way the browser