Classified directory archiving: CSS+DIV

two thousand and seventeen
08-29

CSS animation techniques and details that you may not know

I'm afraid the title is a little big. If you have mastered the following skills, please correct them. This article hopes to introduce some skills that are not commonly used in CSS, supplemented by some practices, so that readers can have a deeper understanding of CSS animation. Cut the crap and get right to the point. The animation mentioned in this article, without special instructions, refers to CSS animation. Positive and negative rotation cancellation. The name is strange, like a mathematical concept. (After writing the article, I found that it should be called positive and negative rotation cancellation. It's good to know that all the pictures are cut off.) In animation, rotation is a very common attribute .. Read on>
two thousand and seventeen
08-05

Immediate form validation using JavaScript

HTML5 introduces several new attributes to implement browser based form validation. The pattern attribute is a regular expression used to define the valid input range of the textarea element and most input element types. The required attribute specifies whether a field needs to be entered. For traditional browsers that do not implement these properties, we can use their values as the basis for filling in the form. We can also use them to provide a more interesting enhancement - instant form validation. More content from the author provides valuable lessons learned from a failed experiment on JavaScript accessibility .. Read on>
two thousand and seventeen
03-11

Three new CSS features worth learning in 2017

Among the many new features of CSS, three of them adopted this year made me excited. 1. Feature Query Not long ago, I wrote a CSS feature that I really hope is about feature query. Now it basically exists! It supports mainstream browsers (including Opera Mini) other than Internet Explorer. Feature query, using the @ supports rule, allows us to include CSS in a condition block, which checks whether the current useragent supports a CSS attribute key value pair. If it does, the content of the CSS attribute key value pair will be checked .. Read on>
two thousand and seventeen
03-11

Talk about the code flavor in CSS again

Talking about code smell in CSS Back in 2012, I wrote an article about potential CSS anti patterns. Looking back at that article, although four years later, I still agree with all the contents, I have added some new things to the list. Again, these contents are not always bad, so they are called code smell: they may be well accepted in your use cases, but they still make people feel a little strange. Before we begin, let's recall what code taste is, from Wikipedia: Read on>
two thousand and seventeen
03-07

How to use CSS to display ellipsis in multi line text

It is not easy to truncate multiline text reasonably. We usually use several methods to solve this problem: overflow: hidden directly hides redundant text text overflow: ellipsis is only applicable to the processing of single line text and various fragile javascript implementations. The reason why this implementation is weak is that the layout information after the backflow is needed when the length of the text changes. For example, the original writing time of the width is September 18, 2012, which is a meaningful day. However, the author ignores an extended attribute provided by WebKit - webkit lin Read on>
two thousand and seventeen
03-07

CSS3 New Feature Learning

CSS3 is the latest CSS standard and is fully backward compatible. However, the W3C is still developing the CSS3 specification. Although the standard specification has not been officially released, modern browsers already support quite a few CSS3 attributes. CSS3 provides many new features that can be played with, blurring the previous definition of only controlling styles, so that styles that were difficult to deal with before (such as rounded corners, multiple columns, etc.) and animation effects that can only be realized through Javascript can now be easily realized through the properties provided by CSS3's new features, and the functions are becoming more and more powerful. 1、 CSS3 border is added in css3 .. Read on>
two thousand and seventeen
02-17

CSS Common Data Type

The values of attributes in CSS have many formats. In order for the user agent (i.e. the browser) to recognize whether a value is valid, it is necessary to confirm whether the value conforms to one of the formats supported by this type of value. The format supported by these attribute values is called data type, which is identified in the form of<this>in the specification. There are two types of data in CSS - specific data types and general data types. A specific data type is only associated with a single attribute or a class of attributes. For example, the<transform function>data type can only be used as the value of the transform attribute. Instead, generic data classes .. Read on>
two thousand and seventeen
02-14

Three CSS features worth learning in 2017

With the coming of the new year, we have a whole set of new things to learn. Although there are many new features this year, there are three new features that I am most excited about. 1. FeatureQueries Some time ago, I wrote an article about FeatureQueries called "One of the CSS features I most want". Well, now it's here. It supports all mainstream browsers (including Opera Mini) except Internet Explorer. FeatureQueries， This @ supports rule allows us to include CSS in a condition block, but only the current user client supports it .. Read on>
two thousand and seventeen
01-17

It turns out that writing CSS like this will crash the app

First of all, I mentioned an XSS attack using CSS in my personal public account. At that time, a friend told me that he asked me to get the cookies of that website, and then go to the backstage of that website to play. However, the technical ability is really limited. I can't do these things. I just think it is dangerous that the website does not properly filter HTML tags. But today's CSS code really crashed the app. Believe it or not, just look at the figure. Story Background Last night, when I was in bed, I suddenly received an email, probably because .. Read on>
two thousand and sixteen
12-21

23 front-end performance optimization, just understand!

Front end performance optimization is a huge topic. If you want to talk about everything, it is estimated that you can't finish it for three days and three nights. Therefore, from the perspective of practical engineering applications, we will talk about the front-end optimization problems we most often encounter. Yslow is a web performance analysis browser plugin developed by Yahoo, which can detect the specific performance values of web pages and has the famous Yslow 23 optimization rules. These 23 rules are enough for us to play with. 1. Reduce the number of HTTP requests and try to combine pictures CSS、JS。 For example, if a page is loaded and there are five css files, five http requests will be sent .. Read on>
two thousand and sixteen
12-21

Seven new CSS length units that front-end programmers need to know

As we all know, although we are familiar with CSS technology, it is easy to get stuck in the process of using it, which makes us very unfavorable when new problems arise. With the continuous development of the web, the requirements for new technologies and new solutions will continue to grow. Therefore, as web designers and front-end developers, we have no choice but to be familiar with our tools and know ourselves and the other, so as to be invincible. This means that there are some special goods that are not usually used, but once they are needed somewhere, they are really special and unsuitable. Today .. Read on>
two thousand and sixteen
12-14

Modularization practice of css preprocessing language

Writing css is an ordinary and frequent work in the front end work. because css is not a language, it seems a bit crude in programming. For small projects, the amount of css is not huge, and the problem is not highlighted. If you want to develop and maintain a larger project, you need to manage and standardize css, or it will have irreversible consequences (scare who??). In the background section [Talking about modularity from css], we optimized and improved the writing method of css through normative constraints, forming a sustainable development route. However, there are still some problems left: redundancy .. Read on>
two thousand and sixteen
12-14

Talking about modularization from css

Modularity is a term that we can hear everywhere today. What is modularity? Why do we need modularity? This is a problem that we need to understand in this series of articles. We also use this part to review the development of the front end. To be honest, the topic of modularization is a bit big. I don't know where to start at the moment. Generally speaking, the work of the front end mainly involves three aspects: html, css, js (javascript), and other syntax tags such as as (actionscript, flash script language), jsp, smart, and other template classes. We will omit them here .. Read on>
two thousand and sixteen
12-14

Less

We all know that writing CSS code is boring, especially for projects with thousands of lines of CSS code. You always use the same rules in the same places and search and replace each color change in your compiler. This requires a lot of effort and rules to keep your CSS maintainable, but it should not be. Fortunately, the website development community has solved this problem. Now we have preprocessors such as Less, Sass and Stylus, which provide us with many advantages over pure CSS. Variable - it can make you easier .. Read on>
two thousand and sixteen
12-14

CSS Advanced Layout Skills

As IE8 gradually exits the stage, many advanced CSS features have been natively supported by browsers, and will become obsolete if you don't learn them. Use: empty to distinguish empty elements Compatibility: IE8 is not supported If we have the above list:<divclass="item">a</div><divclass="item">b</div><divclass="item"></div>We want to distinguish between empty and non empty elements, then there are two solutions. Use: empty to select empty elements:. item: empty {display: none;} or use: not (: empty) to select non empty elements:. it Read on>
two thousand and sixteen
12-12

Learning Notes on Native CSS Grid Layout

Translator's Note: This article is suitable for developers who have some experience in using the native CSS grid layout (you need to understand the syntax of the native CSS grid before reading it). The native CSS grid layout has not been implemented by any official version of the browser so far. The following is a post from Oliver Williams Oliver has learned about native CSS grid for a long time, which can be said to have a say in CSS grid. In this article, he will analyze his own way of learning CSS grid layout with unusual ideas. I quite agree with his idea that it is time to learn a new technology .. Read on>
two thousand and sixteen
11-29

Differences among CSS positioning methods

Static: static positioning is the default value of position. The element box is generated normally, that is, it is displayed normally when there is no positioning. Relative: relative positioning Usage 1: The element is offset by a certain distance from its original position, but the original space is still reserved, which is shown as blank. Usage 2: set an element as position: relative; You can make the child elements of the element absolutely positioned relative to the element. Absolute: the absolute positioning element is deleted from the document stream and positioned relative to the containing block. Element .. Read on>
two thousand and sixteen
11-29

20 CSS code suggestions

In this article, I want to share with you 20 conventions and best practices recommended by the CSS community. Some suggestions may be more suitable for beginners, while others are more advanced, but I hope everyone can gain knowledge that they do not know in this article. 1. Carefully use the outer margin attribute. It is different from other attributes. When the outer margins in the vertical direction meet, they will collapse. This means that if the lower margin of one element meets the upper margin of another element, the larger of the two will be left behind. Here is a simple example. <divclass="squarered"></div><divclass="squa... Read on>
two thousand and sixteen
10-22

N scenarios and N methods for vertical centering in css

At the beginning of work, vertical centering in css has always been a big problem. Every time I use it, I go online to search, search, search. It takes me half a day to find a suitable solution. Then the next time I met you, uh, I forgot about it. Later, I recalled that there are several different application scenarios for CSS vertical centering, and different solutions need to be used. This is why I always feel that the solution last time seems not to work? (It's not my IQ problem.) Well, don't talk much nonsense. Record the different scenarios and solutions encountered, hoping to help yourself or others. Inline or .. Read on>
two thousand and sixteen
10-22

Understand and apply the negative margin value of CSS

The style code in this article adopts SCSS. Browser compatibility is IE6+. It is impossible for your web page not to use margin. In most cases, we use a positive margin value, and sometimes we use a negative margin value. In our impression, the negative margin value is similar to the hack of the browser and is unacceptable. However, this article should note that the negative margin value is not hack, which is a normal writing method. Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... Read on>
two thousand and sixteen
10-22

Powerful EM in CSS

This tutorial will guide you to use "em" to create a basic elastic layout, so as to learn how to calculate it? How to use "em" to extend the layer elastically? How to expand content such as text and images? Let's start today's "em" trip with these questions. What is flexible layout? The text size of the user and the flexible layout of the user's browser is "16px" by default. In other words, the text size of the "body" in the Web page is "16px" by default in the user's browser Read on>
two thousand and sixteen
10-17

CSS3 cleverly realizes chat bubbles

The mobile page that I dare to play has been revised a while ago. The previous page style has become more flat, from dark background to bright background, removing more shadows, and giving users a simple experience style. Ha ha, I'm not a designer, but I can't comment more. Tell everyone that all styles are written by me. All stations!!! Now let's get to the point. What about the good chat bubbles? What is the traditional chat bubble? The code of the above figure is as follows< divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... Read on>
two thousand and sixteen
10-17

Seven css methods to center a container horizontally and vertically HOT

Reading directory method 1: position plus margin method 2: dialog: table cell method 3: position plus transform method 4: flex; align-items:center; Justify content: center Method 5: display: flex; Margin: auto method six: pure position method seven: compatible with lower version browsers, not fixed width and height. This CSS layout is commonly used and is also a common question in interview questions. It has been widely searched online, but I still want to summarize it myself. There are many such methods. This article only summarizes some of them to deepen the impression. The renderings are all like this .. Read on>