Hello, Khabro residents! We have added a new product to our O"Reilly series:
Flexible, lightweight code that meets standards - it can be obtained if you approach the problem analytically. Lea Verou will introduce you to undocumented techniques for finding elegant solutions to a wide range of web design challenges. The book is based on the author's presentations at sixty international web developer conferences, so it touches on the most current topics - from user experience to typography and visual effects. Many books available on the market today document the power of CSS from A to Z. For better or worse, CSS Secrets is not one of them. Its purpose is to fill knowledge gaps left after you've already read the reference material, open your mind to new ways to use functionality you already know, and introduce you to useful CSS features that aren't as trendy or popular, but deserve no less love. the main task 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 intermediate to advanced CSS developers. By eliminating entry-level information, we can spend more time exploring complex use cases modern capabilities CSS and their various combinations. This does mean, however, that I did a few assumptions regarding your level of preparation, my dear reader:I suppose that You know CSS 2.1 by heart and you have several years of development behind you. You are not tormented by the question of how positioning works. You use the generated content to decorate your design without the need for unnecessary markup or images. And you don't hang !important throughout the code because you really understand specificities, inheritance, and cascading. You know the components of the block model and you cannot be upset by the collapse of fields. You are familiar with the different units of change in length, and you know in which situation which one is best to use;
Are you quite familiar with the most popular CSS3 features- either from articles published on the Internet or from books - and tried to apply them, even if limited to their personal projects. Even if you haven't explored them in detail, you know how to create rounded corners, add a box-shadow, or define a linear gradient. You've already played with basic 2D transformations and spent a lot of time learning basic transitions and animation;
Do you have an idea of the format? SVG, and you know what it is used for, even if you do not create files in this format yourself;
Have you heard about CSS preprocessors and you know what they are capable of, even if you decide not to use them in your work;
You don't swim in math level high school : square roots, Pythagorean theorem, sines, cosines and logarithms.
However, so that readers who do not meet the above requirements can also enjoy the book, I have added a sidebar at the beginning of some of the secrets "Prerequisites", which briefly lists aspects of CSS or previous secrets that you need to become familiar with in order to understand and learn how to use the current secret. (This does not include CSS 2.1 features, of course, because that would make the sidebar very long.) It looks like this:
Prerequisites
Knowledge of the box-shadow property, basic knowledge of CSS gradients, the secret of “Flexible Ellipses”This way, even if some things are unknown to you, you can read about them and then come back to the secret again As long as the prerequisites are met, the secrets can be read in any order, although it still makes sense to stick to the order in which they are presented in the book, since it is not random and I spent enough time thinking about the sequence.
Please note that I mentioned "CSS developers" and that "design skills" are not listed among the assumptions presented above. It's important to remember that this is not a design book. While it inevitably touches on certain design principles and describes some user experience improvements, CSS Secrets is first and foremost a book about solving problems with code. CSS code produces some visual output, but it is still code, just like SVG code, WebGL/OpenGL code, or the JavaScript Canvas API, not a design. Writing good responsive CSS requires the same analytical thinking, as for programming. Today, with most people using preprocessors for their CSS code, with all their variables, math, conditionals and loops, writing CSS code is almost indistinguishable from programming!
That doesn't mean I don't encourage designers to read this book. Anyone with enough CSS programming experience can learn something useful from it, and many talented designers are also capable of writing excellent CSS code. However, it should be noted that I Not The goal of this book was to teach you how to improve the visual design or usability of a website, even if it actually happened.
Formatting and Conventions
This book consists of 47 "secrets", thematically grouped into seven chapters. All of these secrets are more or less independent and - provided that all prerequisites are met - they can be learned in any order. The demos in each of the secrets are not ready-made 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'm assuming that you already have an idea of what you intend to implement. The purpose of this book is not to provide design ideas, but solutions for their implementation.Each secret is divided into two or more sections. The first section, entitled "Problem", describes a common problem that we will solve using CSS. Sometimes in such an introduction I also describe popular ones, but not enough good solutions given problem (for example, solutions that require extensive markup, hard-coded values, etc.) and most often end it with one of the variations of the question: is there The best way implement the same?
The description of the problem is followed by one or more solutions. This book was inspired by CSS workshops I gave at various conferences, so I tried to keep the interactive presentation format as much as possible in the book. Each solution is accompanied by several illustrations demonstrating the visual result of each solution step if it leads to any visible changes. Because illustrations are not always accompanied by text describing what is happening in them, all illustrations are numbered and I refer to them by number.
The line code is highlighted in a monospace font, and the names and color codes are often supplemented by a small color label (for example, #f06). Block code snippets look like this:
Background: url("http://adamcatlace.jpg");
or like this:
HTML 
As you'll notice, when the language in a code snippet is other than CSS, it's indicated in the listing header. Additionally, if the example involves only one element, without any pseudo-classes or pseudo-elements, then I usually omit selectors and curly braces (()) in the code for brevity.
All JavaScript examples in this book are at the simplest level and do not require any infrastructure or libraries. There is only one helper function, $$(), needed to make it easier to iterate over multiple elements that match 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); )
Interesting page
Sidebar with interesting information
Sidebars entitled "Fun Page" are interesting notes related to the topic being discussed, such as historical or technical background on a CSS feature being discussed. They are not required to be read to understand or begin to use the basic material, but may still be useful to the curious reader. Each secret comes with one or more interactive examples, accessed using short, easy-to-remember URLs at http://play.csssecrets.io. Links to them look like this:
Future
Future Solutions
The "Future" boxes describe techniques for which draft specifications have been prepared, but which have not yet been implemented at the time of this writing. The reader should always check whether these techniques are supported, as it is quite possible that they were implemented after the publication of the book. In cases where a feature is so obscure that it may not even be mentioned on browser support websites, this sidebar includes a link to a test that the reader can download by following a short, easy-to-remember URL such as the one shown below in the example “Test it!” The design of such tests typically includes shades of green when the feature is supported, and shades of red otherwise. The exact instructions are given in the code in the form of comments. At the end of almost all secrets you will find a list of related specs that looks like this:
Related Specifications
- CSS Backgrounds & Borders- Selectors
- Scalable Vector Graphics
This includes links to all specifications whose features were mentioned in secret. However, like the Prerequisites sidebar, the Related Specifications sidebar does not include the functionality CSS 2.1(http://w3.org/TR/CSS21), otherwise the same capabilities would have to be listed after each secret. This means that the few secrets in which we discuss only features from CSS 2.1 are not supplemented by the Related Specifications sidebar.
Browser support and fallback solutions
Probably the most unusual feature of this book is complete absence browser compatibility tables. This is a deliberate decision, since with today's browser release cycles, such information inevitably becomes outdated before the book even reaches store shelves. I believe that inaccurate information about browser support is misleading to the developer, which is even worse than having no such information.However, most of the secrets presented here are either fairly well supported by browsers or there are good fallback solutions for them. If browser support for a particular technique is too low, you'll see a "Limited Support" warning icon next to the title of that solution, like this next to this paragraph. This should be enough for you to understand that you should not use this solution without checking the level of browser support, as well as without taking care of high-quality backup solutions.
Sometimes you'll find that a certain feature is supported, but the implementation varies slightly between browsers. For example, she may require browser prefix or her syntax may be slightly different. In the examples in this book, I use only the unprefixed syntax as defined in the standards. However, in almost any situation you can simultaneously use different variants syntax, and then the desired one will be selected automatically in accordance with the cascading rules. For this reason standard version should always be listed last. For example, to get a vertical linear gradient from yellow to red in the book, I will always use only the standard version:
Background: linear-gradient(90deg, yellow, red);
However, if you want to support very old browsers, your code might end up looking 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);
Because the landscape of these differences is as fluid as browser support, I expect that in your work checking for these things will be part of the required research before implementing any CSS feature, so I do not discuss them in the solutions presented in this book. Likewise, it's good practice to provide fallback solutions to ensure your websites don't break on older browsers, even at the cost of simpler appearance. When workarounds are obvious, I don't focus on them because I assume you're familiar with cascading principles. For example, when defining a gradient, say like the one shown above, you could add a solid color at the very beginning.
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 turn to tools like Modernizr, which add classes like textshadow or no-textshadow to the root element() so that you can only use them to access elements when the functionality you want is actually supported (or are not supported), for example:
H1 ( color: gray; ) .textshadow h1 ( color: transparent; text-shadow: 0 0 .3em gray; )
If the feature you're trying to back up for is fairly new, you can use a rule native to Modernizr. For example, the previous piece of code would turn into this:
H1 ( color: gray; ) @supports (text-shadow: 0 0 .3em gray) ( h1 ( color: transparent; text-shadow: 0 0 .3em gray; ) )
However, use should be approached with great caution. By applying it here, we limited the described effect not just to browsers that support text shadows, but also to browsers that additionally support the rule, and this is a much more limited set.
Finally, there is always the option to add a few lines of JavaScript code self made, which will determine if the feature is supported and add classes to the root element just like Modernizr does. The main way to check if a property is supported is to see if it exists by using the element.style object of any element:
JS var root = document.documentElement; // if ("textShadow" in root.style) ( root.classList.add("textshadow"); ) else ( root.classList.add("no-textshadow"); )
If we need to check multiple properties, it's easy to turn the previous check 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;
To test a value, you need to assign it to a property and see if the browser will save it. Since we're modifying styles here rather than just checking for their existence, it makes sense 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"); )
This can also easily be converted to a function:
JS function testValue(id, value, property) ( var dummy = document.createElement("p"); dummy.style = value; if (dummy.style) ( root.classList.add(id); return true; ) root .classList.add("no-" + id); return false;
Testing selectors is a little more complicated, but follows the same principle: when it comes to CSS, browsers discard anything they don't understand, so to test whether a feature was recognized, you can dynamically apply it and see if the browser keeps it . You must always remember, however, that even if the browser is able to parse the syntax CSS capabilities are does not guarantee that such a feature is implemented correctly and that it is generally implemented in principle.
More details about the book can be found on the publisher's website
Table of contents
Excerpt
For Khabro residents 25% discount using coupon - I believe
The coupon is valid for the book as well as the entire series.
Cascading style sheets have enormous functionality and hide a lot interesting features, and sometimes pitfalls. Over the course of my work, I have accumulated (and continue to accumulate) a library of CSS-related tricks and secrets. Something is forgotten, something seems unnecessary today, but may be useful in the future. Therefore, the most correct thing is to write it down and share it, so it’s easier to find it yourself and it may be useful for someone else.
Many examples of custom elements do not correspond to the problems of reality at all. Let's start with how a custom checkbox is made in principle and where the need comes from. Of necessity, everything is simple - few people like the native design of chaboxes and does not look very good on almost any website. Now how to actually change it - the native component cannot be changed the way it was born,
An excellent article with visual examples of how collapsing the margins of elements works - What’s the Deal with Margin Collapse?. Somehow it turned out that not all front-end developers know about this behavior of margins. When collapse occurs at two adjacent elements. At the child element. If the height of the element is zero, then collapse
Sometimes you need to figure out where each element is located. This is usually needed to find a bug in css. For example, to catch how a scrollbar suddenly appeared or why an extra overflow appeared. The simplest solution for this is to highlight all the elements by adding a frame to them. However, you should not use the border style because the layout will change, since
Report by Vitaly Friedman on how to make the web better and faster for everyone. Vitaly is digging so deep into browser technology that he will soon find oil. This is the beauty of his reports. I always recommend it. I will list the main points of the video, the entire presentation is below. Compressing images In addition to gzip, there are at least 2 more technologies
Every time I talk about the need to optimize CSS selectors and not use cascades, I hear the answer: “it works fast anyway, especially on a small number of elements.” And here it’s hard to disagree - it’s really fast if there are few elements, moreover, you most likely haven’t really encountered problems with slowness due to curves
Some news from the world of updates in chrome. Other browsers are also catching up, of course, but for now they are only playing catch-up. New grid markup Last September, I wrote that they were going to introduce new CSS markup into browsers. So she’s already in chrome! You can take it and use it. By the way, it is supported by everyone modern browsers. Website with
Different selectors are handled differently by the browser (captain obvious). As a result, some work faster than others. It makes sense to carefully approach working with selectors from the very beginning, because when you already need to solve the problem with performance, so much code has been written that mom won’t cry. Different selectors for operating speed. The lower, the worse. ID, for example Class, for example
A very nice collection of examples of visual web solutions - animation, scripts. There are already more than 300 pieces collected from everywhere on the network. The author certainly did a great job, of course most of These examples will remain on the shelves of front-end developers, but it’s still worth a look for inspiration 😉 Links
Even layout designers with quite a lot of experience can’t get used to the fact that only with the help of CSS can you do almost anything - from column layout to buttons and pop-ups. Cascading Style Sheets technology allows you to specify almost any design element - from font size to the color of individual blocks. But what not everyone knows is that CSS can do a lot more.
CSS Syntax
There are three ways to apply styles in an HTML document.
1. Embedding (inline). Style descriptions can be embedded in various HTML descriptors (tags) for which style makes sense, such as declaring paragraphs, headings, horizontal bars, anchors, and table cells. The following example demonstrates a paragraph declaration handle and adding the STYLE attribute to it to achieve the desired effect.
Red text
2. Embed, which provides control over the HTML page. Using a handle
red text