The book "The secrets of CSS. Perfect solutions to daily tasks. ”
Hi, Habrozhiteli! We have added our O'Reilly series to the novelty:
Flexible, lightweight code that meets standards - you can get it if you approach the problem analytically. Lea Vera will introduce you to undocumented techniques that allow you to find elegant solutions for a wide range of web design tasks. The book is based on the author's reports at sixty international conferences of web developers, so that it covers the most relevant topics - from user interaction to typography and visual effects. The many books available on the market today document the capabilities of CSS from A to Z. Good or bad, but CSS Secrets is not one of them. Its purpose is to fill the gaps in knowledge left after you have already familiarized yourself with reference materials, open your mind to new ways of using functionality that you already know, and also introduce you to useful CSS features that are not so fashionable and popular, but deserve no less love. The main task of this book is to teach you how to solve problems using CSS.
The main target audience of this book is the intermediate and advanced CSS developers . By getting rid of entry-level information, we can devote more time to studying the complex scenarios of using modern CSS features and their various combinations. This, however, means that I made several assumptions about your level of training, my dear reader:
- I assume that you know CSS 2.1 by heart and you have several years of development behind you. You do not suffer the question of how positioning works. You use the generated content to decorate the design, without resorting to extra markup or images. And you do not hang ! Important throughout the code, as you really understand specificity, inheritance and cascading. You know the components of the block model and you are not able to upset the collapse of the fields. You are familiar with different units of length change, and you know in which situation which one is better to use;
')
- you are quite familiar with the most popular features of CSS3 - either from articles published on the Web, or from books - and tried to use them, even if limited to your personal projects. Even if you didn’t explore them in detail, you know how to create rounded corners, add a box-shadow or define a linear gradient. You have already played with basic two-dimensional transformations and have spent a lot of time studying basic transitions and animation;
- you have an idea of ​​the SVG format, and you know what it is used for, even if you do not create files in this format yourself;
- you can read and understand the simplest JavaScript code , such as, for example, what is required to create elements, manipulate their attributes and add them to the document;
- you have heard about CSS preprocessors and know what they are capable of, even if you decided not to use them in your work;
- you do not swim in high school mathematics : square roots, the Pythagorean theorem, sines, cosines and logarithms.
However, in order for readers who do not meet the above requirements, to enjoy the book, I added the “Preliminary Requirements” box at the beginning of some secrets, which briefly lists aspects of CSS or previous secrets that you need to read to understand and learn how to use the current secret . (This, of course, does not include the features of CSS 2.1, because in this case the sidebar would become very long.) It looks like this:
Knowledge of the box-shadow property, basic knowledge of CSS gradients, the secret of "Flexible ellipses"
Thus, even if some things are unknown to you, you can read about them and then return to the secret. Provided that the preliminary requirements are met, the secrets can be read in any order , although it makes sense to adhere to the order in which they are presented in the book, since it is not accidental and I have devoted enough time to thinking about the sequence.
Please note that I mentioned “CSS developers” and that “design skills” are not among the above assumptions. It is important to remember that this is not a design book . Although it inevitably affects certain design principles and describes some improvements in user interaction, CSS Secrets is primarily a book about solving problems with code . The CSS code produces some visual result, but it is still code, exactly the same as SVG code, WebGL / OpenGL or JavaScript Canvas API, and not design. Writing good, flexible CSS requires the same analytical thinking as programming. Today, when most people use preprocessors for their CSS code with all their variables, mathematics, conditional expressions and cycles, writing CSS code is almost indistinguishable from programming!
This does not mean that I do not invite designers to read this book. Anyone who has enough CSS programming experience can learn something useful from it, and many talented designers are also able to write excellent CSS code. However, it should be noted that I did not set myself the goal in this book to teach you how to improve the visual design or usability of the website, even if it actually happened.
This book consists of 47 "secrets", thematically grouped into seven chapters. All these secrets are more or less independent and - provided that all the preliminary requirements are fulfilled - you can get acquainted with them in any order. The demo examples in each of the secrets are not ready websites or even parts of them. I deliberately made them as small and simple as possible in order to make them easier to study. I proceed from the assumption that you already have an idea of ​​what you intend to implement. The purpose of this book is to provide not design ideas, but solutions for their implementation.
Each secret is divided into two or more sections. The first section, entitled "The Problem," contains a description of a common problem that we will solve with CSS. Sometimes in such an introduction I also describe popular, but not good enough solutions to this problem (for example, solutions requiring volume marking, hard-coded values, etc.) and most often complete it with one of the variations of the question: is there a better way to implement the same? the most?
The problem description is followed by one or more solutions. The inspiration for this book was the CSS workshops I held at various conferences, so I tried to keep the format of the interactive presentation as much as possible in the book. Each solution is accompanied by several illustrations that demonstrate the visual result of each step of the decision in case it leads to any visible changes. Since the illustrations are not always next to the text describing what is happening to them, all the illustrations are numbered and I refer to them by numbers.
The string code is in monospaced font, and names and color codes are often supplemented with a small color mark (for example, # f06). Block fragments of code look like this:
or so:
As you noticed, in the case when the language in the code fragment is different from CSS, it is listed in the listing header. In addition, if only one element is involved in the example, without any pseudo-classes or pseudo-elements, then usually for brevity I omit selectors and curly brackets ({}) in the code.
All JavaScript examples in this book are of the simplest level and do not require any infrastructure or libraries. Only one auxiliary function, $$ (), is used to make it easier to go through the set of elements corresponding to a specific CSS selector. Here is the definition of this function:
Entertaining page
The sidebars titled “Entertaining Page” are interesting notes related to the topic under discussion, for example, a historical or technical background on the CSS feature in question. They do not have to be read in order to understand or begin to use the main material, and yet they may be useful to an inquisitive reader.
Each secret includes one or several interactive examples, which are accessed using short and easy-to-remember URLs at http://play.csssecrets.io . Links to them look like this:
http://play.csssecrets.io/polka
I strongly recommend that you carefully study the examples from the "Try it yourself!" Frame, especially if you are confused in the description of the technique or are stumped in trying to reproduce the example yourself.
Future
Sidebar "Future" contains a description of the techniques for which draft specifications have already been prepared, but which at the time of this writing, have not yet been implemented. The reader should always check whether these techniques are supported, since it is quite possible that they were implemented after the book was published. In cases where the opportunity is so little known that it may not even be mentioned on browser support websites, this box includes a link to a test that the reader can download by clicking on a short, easily remembered URL, such as shown below. in the example "Test!". Making such tests usually includes shades of green when the opportunity is maintained, and shades of red otherwise. The exact instructions are given in the code in the form of comments.
http://play.csssecrets.io/test-conic-gradient
At the end of almost all the secrets you will find a list of related specifications, which looks like this:
- CSS Backgrounds & Borders
- Selectors
- Scalable Vector Graphics
This includes links to all specifications, the capabilities of which were mentioned in secret. However, just like the “Preliminary Requirements” sidebar, the “Related Specifications” sidebar does not include CSS 2.1 functionality ( http://w3.org/TR/CSS21 ), otherwise the same features would have to be listed after each secret. This means that the few secrets in which we discuss only the capabilities from CSS 2.1 are not complemented by the “Related Specifications” sidebar.
Probably the most unusual feature of this book is the complete absence of browser compatibility tables . This is a deliberate decision, since, taking into account the current release cycles of browsers, such information inevitably becomes outdated even before the book has time to get to the store shelves. I believe that inaccurate information about browser support is misleading the developer, which is even worse than the lack of such information .
However, most of the secrets presented here are either fairly well supported by browsers, or there are good backup solutions for them. If browser support for a particular technology is too low, you will see the warning icon “Limited support” next to the heading of the corresponding solution, like here, next to this paragraph. This should be enough for you to understand: you should not use this solution without checking the level of support by browsers, as well as without taking care of high-quality backup solutions.
Sometimes you will find that a particular feature is supported, but its implementation is slightly different in different browsers. For example, it may require a browser prefix or its syntax may be somewhat different . In the examples in this book, I use only syntax without prefixes, as defined in the standards. However, in almost any situation, you can use different syntax options at the same time, and then the necessary one will be selected automatically in accordance with the rules of cascading. For this reason, the standard version should always be listed last . For example, to get a vertical linear gradient from yellow to red in a book, I will always use only the standard version:
However, if you want to provide support for very old browsers, perhaps your code will look something like this:
Since the landscape of these differences is as unstable as browser support, I expect that in your work, checking such things will be one of the stages of mandatory research before applying a particular CSS feature, so I do not discuss them in the solutions presented in this book. Similarly, providing backup solutions is considered good practice so that your websites do not break in older browsers, even at the cost of a simpler look. When workarounds are obvious, I don’t focus on them, as I assume you are familiar with the principles of cascading. For example, when defining a gradient, say, such as the one shown above, you could add a solid color at the very beginning.
When choosing such a color, it is recommended to stop at an average of two gradient colors (in this case, rgb (255, 128, 0)):
However, sometimes cascading does not provide a reliable backup solution. Then, as a last resort, you can resort to tools like Modernizr , which add classes like textshadow or no-textshadow to the root element (), so that you can use them to access elements only when the necessary capabilities are actually supported (or not supported) , for example:
If the opportunity for which you are trying to create a backup solution is quite new, then you can use the supports , “native” rule for Modernizr. For example, the previous code snippet will turn into this:
However, the use of supports should be approached with great care. Applying it here, we have limited the described effect not only by browsers that support text shadows, but also by browsers that support the additional supports rule, and this is a much more limited set.
Finally, there is always the option to add a few lines of hand-made JavaScript code that will determine if the feature is supported, and add classes to the root element in the same way Modernizr does. The main way to check if a property is supported is to see if it exists using the element.style object of any element:
If we need to check several properties, it is easy to turn the previous test into a function:
In order to test the value, you need to assign it to the property and check whether the browser will save it. Since here we modify the styles, and not just check their existence, it is wise to use a stub element in the test:
It is also easily converted to a function:
Testing selectors and rules is a little more difficult, but it is done on the same principle: when it comes to CSS, browsers drop everything they don’t understand, so you can dynamically apply it and see if it has been recognized. browser. It must always be remembered, however, that even if the browser is able to parse the syntax of CSS capabilities, this does not guarantee that such an opportunity is implemented correctly and that it is generally implemented in principle .
More information about the book can be found on the publisher's website.
Table of contents
Excerpt
For Habrozhiteley a 25% discount on the coupon - Vera
The coupon is valid for the book, as well as for the entire O'Reilly series.
Flexible, lightweight code that meets standards - you can get it if you approach the problem analytically. Lea Vera will introduce you to undocumented techniques that allow you to find elegant solutions for a wide range of web design tasks. The book is based on the author's reports at sixty international conferences of web developers, so that it covers the most relevant topics - from user interaction to typography and visual effects. The many books available on the market today document the capabilities of CSS from A to Z. Good or bad, but CSS Secrets is not one of them. Its purpose is to fill the gaps in knowledge left after you have already familiarized yourself with reference materials, open your mind to new ways of using functionality that you already know, and also introduce you to useful CSS features that are not so fashionable and popular, but deserve no less love. The main task of this book is to teach you how to solve problems using CSS.Who is this book for?
The main target audience of this book is the intermediate and advanced CSS developers . By getting rid of entry-level information, we can devote more time to studying the complex scenarios of using modern CSS features and their various combinations. This, however, means that I made several assumptions about your level of training, my dear reader:
- I assume that you know CSS 2.1 by heart and you have several years of development behind you. You do not suffer the question of how positioning works. You use the generated content to decorate the design, without resorting to extra markup or images. And you do not hang ! Important throughout the code, as you really understand specificity, inheritance and cascading. You know the components of the block model and you are not able to upset the collapse of the fields. You are familiar with different units of length change, and you know in which situation which one is better to use;
')
- you are quite familiar with the most popular features of CSS3 - either from articles published on the Web, or from books - and tried to use them, even if limited to your personal projects. Even if you didn’t explore them in detail, you know how to create rounded corners, add a box-shadow or define a linear gradient. You have already played with basic two-dimensional transformations and have spent a lot of time studying basic transitions and animation;
- you have an idea of ​​the SVG format, and you know what it is used for, even if you do not create files in this format yourself;
- you can read and understand the simplest JavaScript code , such as, for example, what is required to create elements, manipulate their attributes and add them to the document;
- you have heard about CSS preprocessors and know what they are capable of, even if you decided not to use them in your work;
- you do not swim in high school mathematics : square roots, the Pythagorean theorem, sines, cosines and logarithms.
However, in order for readers who do not meet the above requirements, to enjoy the book, I added the “Preliminary Requirements” box at the beginning of some secrets, which briefly lists aspects of CSS or previous secrets that you need to read to understand and learn how to use the current secret . (This, of course, does not include the features of CSS 2.1, because in this case the sidebar would become very long.) It looks like this:
Prerequisites
Knowledge of the box-shadow property, basic knowledge of CSS gradients, the secret of "Flexible ellipses"
Thus, even if some things are unknown to you, you can read about them and then return to the secret. Provided that the preliminary requirements are met, the secrets can be read in any order , although it makes sense to adhere to the order in which they are presented in the book, since it is not accidental and I have devoted enough time to thinking about the sequence.
Please note that I mentioned “CSS developers” and that “design skills” are not among the above assumptions. It is important to remember that this is not a design book . Although it inevitably affects certain design principles and describes some improvements in user interaction, CSS Secrets is primarily a book about solving problems with code . The CSS code produces some visual result, but it is still code, exactly the same as SVG code, WebGL / OpenGL or JavaScript Canvas API, and not design. Writing good, flexible CSS requires the same analytical thinking as programming. Today, when most people use preprocessors for their CSS code with all their variables, mathematics, conditional expressions and cycles, writing CSS code is almost indistinguishable from programming!
This does not mean that I do not invite designers to read this book. Anyone who has enough CSS programming experience can learn something useful from it, and many talented designers are also able to write excellent CSS code. However, it should be noted that I did not set myself the goal in this book to teach you how to improve the visual design or usability of the website, even if it actually happened.
Formatting and Legend
This book consists of 47 "secrets", thematically grouped into seven chapters. All these secrets are more or less independent and - provided that all the preliminary requirements are fulfilled - you can get acquainted with them in any order. The demo examples in each of the secrets are not ready websites or even parts of them. I deliberately made them as small and simple as possible in order to make them easier to study. I proceed from the assumption that you already have an idea of ​​what you intend to implement. The purpose of this book is to provide not design ideas, but solutions for their implementation.
Each secret is divided into two or more sections. The first section, entitled "The Problem," contains a description of a common problem that we will solve with CSS. Sometimes in such an introduction I also describe popular, but not good enough solutions to this problem (for example, solutions requiring volume marking, hard-coded values, etc.) and most often complete it with one of the variations of the question: is there a better way to implement the same? the most?
The problem description is followed by one or more solutions. The inspiration for this book was the CSS workshops I held at various conferences, so I tried to keep the format of the interactive presentation as much as possible in the book. Each solution is accompanied by several illustrations that demonstrate the visual result of each step of the decision in case it leads to any visible changes. Since the illustrations are not always next to the text describing what is happening to them, all the illustrations are numbered and I refer to them by numbers.
The string code is in monospaced font, and names and color codes are often supplemented with a small color mark (for example, # f06). Block fragments of code look like this:
background: url("http://adamcatlace.jpg"); or so:
HTML<figure> <img src="http://adamcatlace.jpg" /> <figcaption>Sir Adam Catlace</figcaption> </figure> As you noticed, in the case when the language in the code fragment is different from CSS, it is listed in the listing header. In addition, if only one element is involved in the example, without any pseudo-classes or pseudo-elements, then usually for brevity I omit selectors and curly brackets ({}) in the code.
All JavaScript examples in this book are of the simplest level and do not require any infrastructure or libraries. Only one auxiliary function, $$ (), is used to make it easier to go through the set of elements corresponding to a specific CSS selector. Here is the definition of this function:
JS function $$(selector, context) { context = context || document; var elements = context.querySelectorAll(selector); return Array.prototype.slice.call(elements); } Entertaining page
Sidebar with interesting information
The sidebars titled “Entertaining Page” are interesting notes related to the topic under discussion, for example, a historical or technical background on the CSS feature in question. They do not have to be read in order to understand or begin to use the main material, and yet they may be useful to an inquisitive reader.
Each secret includes one or several interactive examples, which are accessed using short and easy-to-remember URLs at http://play.csssecrets.io . Links to them look like this:
Try it yourself
http://play.csssecrets.io/polka
I strongly recommend that you carefully study the examples from the "Try it yourself!" Frame, especially if you are confused in the description of the technique or are stumped in trying to reproduce the example yourself.
Future
Future decisions
Sidebar "Future" contains a description of the techniques for which draft specifications have already been prepared, but which at the time of this writing, have not yet been implemented. The reader should always check whether these techniques are supported, since it is quite possible that they were implemented after the book was published. In cases where the opportunity is so little known that it may not even be mentioned on browser support websites, this box includes a link to a test that the reader can download by clicking on a short, easily remembered URL, such as shown below. in the example "Test!". Making such tests usually includes shades of green when the opportunity is maintained, and shades of red otherwise. The exact instructions are given in the code in the form of comments.
Test
http://play.csssecrets.io/test-conic-gradient
At the end of almost all the secrets you will find a list of related specifications, which looks like this:
Related specifications
- CSS Backgrounds & Borders
- Selectors
- Scalable Vector Graphics
This includes links to all specifications, the capabilities of which were mentioned in secret. However, just like the “Preliminary Requirements” sidebar, the “Related Specifications” sidebar does not include CSS 2.1 functionality ( http://w3.org/TR/CSS21 ), otherwise the same features would have to be listed after each secret. This means that the few secrets in which we discuss only the capabilities from CSS 2.1 are not complemented by the “Related Specifications” sidebar.
Browser Support and Backup Solutions
Probably the most unusual feature of this book is the complete absence of browser compatibility tables . This is a deliberate decision, since, taking into account the current release cycles of browsers, such information inevitably becomes outdated even before the book has time to get to the store shelves. I believe that inaccurate information about browser support is misleading the developer, which is even worse than the lack of such information .
However, most of the secrets presented here are either fairly well supported by browsers, or there are good backup solutions for them. If browser support for a particular technology is too low, you will see the warning icon “Limited support” next to the heading of the corresponding solution, like here, next to this paragraph. This should be enough for you to understand: you should not use this solution without checking the level of support by browsers, as well as without taking care of high-quality backup solutions.
Sometimes you will find that a particular feature is supported, but its implementation is slightly different in different browsers. For example, it may require a browser prefix or its syntax may be somewhat different . In the examples in this book, I use only syntax without prefixes, as defined in the standards. However, in almost any situation, you can use different syntax options at the same time, and then the necessary one will be selected automatically in accordance with the rules of cascading. For this reason, the standard version should always be listed last . For example, to get a vertical linear gradient from yellow to red in a book, I will always use only the standard version:
background: linear-gradient(90deg, yellow, red); However, if you want to provide support for very old browsers, perhaps your code will look something like this:
background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red); Since the landscape of these differences is as unstable as browser support, I expect that in your work, checking such things will be one of the stages of mandatory research before applying a particular CSS feature, so I do not discuss them in the solutions presented in this book. Similarly, providing backup solutions is considered good practice so that your websites do not break in older browsers, even at the cost of a simpler look. When workarounds are obvious, I don’t focus on them, as I assume you are familiar with the principles of cascading. For example, when defining a gradient, say, such as the one shown above, you could add a solid color at the very beginning.
When choosing such a color, it is recommended to stop at an average of two gradient colors (in this case, rgb (255, 128, 0)):
background: rgb(255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red); However, sometimes cascading does not provide a reliable backup solution. Then, as a last resort, you can resort to tools like Modernizr , which add classes like textshadow or no-textshadow to the root element (), so that you can use them to access elements only when the necessary capabilities are actually supported (or not supported) , for example:
h1 { color: gray; } .textshadow h1 { color: transparent; text-shadow: 0 0 .3em gray; } If the opportunity for which you are trying to create a backup solution is quite new, then you can use the supports , “native” rule for Modernizr. For example, the previous code snippet will turn into this:
h1 { color: gray; } @supports (text-shadow: 0 0 .3em gray) { h1 { color: transparent; text-shadow: 0 0 .3em gray; } } However, the use of supports should be approached with great care. Applying it here, we have limited the described effect not only by browsers that support text shadows, but also by browsers that support the additional supports rule, and this is a much more limited set.
Finally, there is always the option to add a few lines of hand-made JavaScript code that will determine if the feature is supported, and add classes to the root element in the same way Modernizr does. The main way to check if a property is supported is to see if it exists using the element.style object of any element:
JS var root = document.documentElement; // <html> if ('textShadow' in root.style) { root.classList.add('textshadow'); } else { root.classList.add('no-textshadow'); } If we need to check several properties, it is easy to turn the previous test into a function:
JS function testProperty(property) { var root = document.documentElement; if (property in root.style) { root.classList.add(property.toLowerCase()); return true; } root.classList.add('no-' + property.toLowerCase()); return false; } In order to test the value, you need to assign it to the property and check whether the browser will save it. Since here we modify the styles, and not just check their existence, it is wise to use a stub element in the test:
JS var dummy = document.createElement('p'); dummy.style.backgroundImage = 'linear-gradient(red,tan)'; if (dummy.style.backgroundImage) { root.classList.add('lineargradients'); } else { root.classList.add('no-lineargradients'); } It is also easily converted to a function:
JS function testValue(id, value, property) { var dummy = document.createElement('p'); dummy.style[property] = value; if (dummy.style[property]) { root.classList.add(id); return true; } root.classList.add('no-' + id); return false; } Testing selectors and rules is a little more difficult, but it is done on the same principle: when it comes to CSS, browsers drop everything they don’t understand, so you can dynamically apply it and see if it has been recognized. browser. It must always be remembered, however, that even if the browser is able to parse the syntax of CSS capabilities, this does not guarantee that such an opportunity is implemented correctly and that it is generally implemented in principle .
More information about the book can be found on the publisher's website.
Table of contents
Excerpt
For Habrozhiteley a 25% discount on the coupon - Vera
The coupon is valid for the book, as well as for the entire O'Reilly series.
Source: https://habr.com/ru/post/307364/
All Articles