Interest. Pixels, Em, Ex and Percents are relative sizes in CSS. Attributes and properties and

It is argued that, in general, the overwhelming number of users only view Internet materials, but do not actively participate in the discussion (on forums, in online communities, etc.).

Definition

According to this rule, the proportion of Internet users who create content is no more than 1% of the people simply viewing that content. So, for example, for every person who posts a message on a forum, there are 99 people who view the post but do not react to it.

Similar patterns

The one percent rule is similar to Pareto's law (the 80:20 ratio), which states that 20% of the team members do 80% of the work.

Write a review about the article "The One Percent Rule"

Notes

Excerpt describing the One Percent Rule

- Look, Anisyushka, are the strings intact or something on the guitar? I haven’t picked it up for a long time - it’s pure marching! abandoned.
Anisya Fedorovna willingly went with her light tread to carry out her master’s instructions and brought a guitar.
The uncle blew off the dust without looking at anyone, tapped the lid of the guitar with his bony fingers, tuned it and adjusted himself in the chair. He took (with a somewhat theatrical gesture, placing the elbow of his left hand) the guitar above the neck and, winking at Anisya Fedorovna, began not the Lady, but struck one sonorous, clean chord, and measuredly, calmly, but firmly began to finish the famous song at a very quiet pace: Po li and ice pavement. At the same time, in time with that sedate joy (the same one that Anisya Fedorovna’s whole being breathed), the motive of the song began to sing in the souls of Nikolai and Natasha. Anisya Fedorovna blushed and, covering herself with a handkerchief, left the room laughing. Uncle continued to finish the song cleanly, diligently and energetically, looking with a changed, inspired look at the place from which Anisya Fedorovna had left. There was just a little something laughing in his face on one side, under his gray mustache, and he laughed especially when the song progressed further, the beat quickened, and something came off in places where it was too loud.
- Lovely, lovely, uncle; more, more,” Natasha screamed as soon as he finished. She jumped up from her seat, hugged her uncle and kissed him. - Nikolenka, Nikolenka! - she said, looking back at her brother and as if asking him: what is this?
Nikolai also really liked his uncle’s playing. The uncle played the song a second time. The smiling face of Anisya Feodorovna appeared again at the door and from behind her there were still other faces... “Behind the cold key, she shouts: girl, wait!” Uncle played, made another deft move, tore it off and moved his shoulders.
“Well, well, my dear, uncle,” Natasha moaned in such a pleading voice, as if her life depended on it. The uncle stood up and it was as if there were two people in him - one of them smiled seriously at the merry fellow, and the merry fellow made a naive and neat prank before the dance.
- Well, niece! - the uncle shouted, waving his hand towards Natasha, tearing off the chord.
Natasha threw off the scarf that was draped over her, ran ahead of her uncle and, putting her hands on her hips, made a movement with her shoulders and stood.
Where, how, when did this countess, raised by a French emigrant, suck into herself from that Russian air that she breathed, this spirit, where did she get these techniques that pas de chale should have long ago been supplanted? But these spirits and techniques were the same, inimitable, unstudied, Russian ones that her uncle expected from her. As soon as she stood up and smiled solemnly, proudly and slyly with gaiety, the first fear that gripped Nikolai and everyone present, the fear that she would do the wrong thing, passed and they were already admiring her.

Hello, dear readers of the blog site. Today we will continue the conversation about cascading style sheets (you can find materials on this topic in). Almost no website on the Internet can now function without this technology, so learning the style markup language is just as necessary as studying).

Without understanding the basics of this technology, you will not be able to make even small changes to your website template and will be forced to either put up with it or hire third-party specialists. If, for example, PHP is difficult to learn, then HTML and CSS will not be difficult to master at the user level. In any case, it’s worth a try, and then you’ll see it will work itself out.

Values for rules in CSS - colors, functionality and sizes

In the last article we talked about (Style and Link). Today we will continue the topic we started and talk about inheritance in styling and setting font sizes (pixel, point, percentage, etc.).

In general, there won’t be anything complicated or voluminous today, but in the next article we will begin to look at selectors - a rather voluminous topic and probably difficult to master.

So let's see, where can we get information about cascading style sheets? It would probably be logical to look for it all on the same site, well, or immediately go to the page with the current CSS specification. To view all the rules available in this specification, just follow the link from top menu entitled " properties" .

The values for these rules can be some words (for example, left, right, center, justify, etc.), which are known in advance and specified in the table from this specification (see the figure above - the “Values” column) . Values can also be simply numbers that do not have a dimension (for example, in ) or a designation (for example, #fff8dc).

Let's take a closer look at setting colors in CSS and how this can be implemented:

Can be used as values for CSS rules and so-called functionalities. A striking example of the functionality is Url and enclosed in round brackets— url (images/navtabr.png). Thus, it is very common to set a background image in styles:

Well, also in CSS very often as values font sizes used and other things. If you remember, they were simply given by numbers from 1 to 7. And, for example, the sizes of images in the attributes were simply given by numbers without a dimension designation, although these numbers meant pixels.

Style markup was originally intended for various devices output - not only for monitors, but also, for example, for formatting information intended for printing. Therefore, font sizes or, for example, indents are always specified in CSS with units of dimension. Moreover, the syntax implies the continuous writing of numbers and units of dimension (without adding spaces between them).

In this case, both relative and absolute units can be used. Absolute ones are associated with the physical world and the following units can be used to indicate them:

Absolute sizes in CSS can all be used for the same printing. Centimeters (cm) and millimeters (mm) are the fundamental units of the metric system, and inches (in) are the basic unit from which points (pt) and picas (pc) are often used in printing.

An inch (in), accordingly, is 25.4 millimeters (mm), and a point (pt) is formed by dividing one inch (in) into 72 parts. That. one point (pt) will be equal to approximately one third of a millimeter (mm). Well, one spade (pc) has a size equal to 12 points (pt). Here, I think, everything is clear.

Pixels, Em, Ex and Percentages - Relative Sizes in CSS

So, all absolute units are used exclusively for printing. But to display information on monitors, you need to use dimensions in relative units. The thing is that the physical size of the dots that form images on the monitor (they are also called pixels) can vary depending on the type and physical size this same monitor.

In addition, on any monitor you can set a resolution different from the physical one (when the pixel is so small that it is not distinguishable) and it is possible that with a large monitor diagonal and low resolution, one pixel will be visible to the naked eye. Those. A monitor pixel is a purely relative value and therefore emphasis should be placed on specifying dimensions in relative terms.

Relative sizes in CSS can be specified using the following units:

So let's start with pixels, about which we have, in fact, already said everything. They are relative values for the simple reason that there is no such physical measure. A pixel appears on the monitor screen as a result of the video card processing some signals, and its size will vary depending on the monitor used and depending on installed settings(screen resolution).

More cunning ones follow relative units font sizes used in CSS − Em and Ex. First is the default font height of the user's computer, and Ex is the height of the capital letter "x" in the default font. It's probably a little unclear. Let's look at this in a little more detail.

Many browsers accept the Ex value as half the Em value (eg IE). Any font has a baseline, there is capital letters and some special ones lower case, which extend beyond the baseline (for example, "y"). There are also letters with diacritics, for example, “ё” and “й” in Russian or some umlauts, etc. That's why font size (Em) determined by extension elements.

Well, Ex is, as I already said, the height of the capital (small) letter “x” (x) in Latin layout. It is clear that depending on the ratio of lowercase and capital letters in a font, these Em and Ex values may be related to each other in different ways, rather than simply Ex=Em/2.

The relative size unit Ex is used quite rarely in CSS; Em is mostly used (not taking into account pixels, which are used to indicate size even more often). But there is another way to set relative sizes - interest, i.e. it will have to be calculated relative to something.

Not all CSS rules can be specified with percentages. Even in the W3C list this is highlighted in a separate column:

If nothing is written next to a rule in the “Percentages” column, then the use of percentages for this rule is not available. For the same style rules that are allowed to use percentage sizes, this column will explain why this can be used.

Inheritance in CSS according to the specification

All possible values of the rules and all their valid values are described in this specification and are known in advance. But there is one very big difference from HTML. All available language tags hypertext markup they are supported and interpreted the same in all browsers, which is not the case with CSS.

Some style properties may be supported and interpreted different browsers differently. Moreover, it depends both on the browser and its version.

Let's look at inheritance in CSS with examples to reinforce the material, so to speak. To do this, let’s create a kind of nesting doll from three Div containers nested inside each other and use this example to see how inheritance is carried out for some rules and not for others:

So, we remember that inheritance is allowed for the color rule, but not for the background rule. Accordingly, we have the following picture:

In the first element (outer container) we specify with Style attribute the “color:red” rule, which instructs the text enclosed in this container to be colored red. Because The “color” rule supports inheritance, which means that in all elements nested in the outer container, the text will also have to be colored red.

Actually, this is what happens, with the exception of the innermost Div container, which has its own “color:blue” specified. Naturally, the rule written directly for this HTML tag, will take precedence over the one that was specified in external element. Therefore, the text in the inner container will be blue.

Although the “background” rule according to the CSS specification does not support inheritance, it is... The third Div container is located inside the second, which gives the illusion of inheriting the background fill. But that's not true. If you try to hypothetically move the inner container outside the second one, then it will no longer have a background.

In the next article we will begin to do this basic concept V .

Good luck to you! Before see you soon on the pages of the blog site

You can watch more videos by going to

");">

Getting to know the units

Um ( em): em is a scalable unit that is used for web documents. One em equals the current font size. For example, if the document's font size is 12pt, then 1em equals 12pt. Since em is scaled, 2em equals 24pt, .5em equals 6pt, etc. Due to its scalability and high compatibility with mobile devices, em is increasingly used in web documents.

Pixels ( px): Pixels are fixed-size units that are used for everything that is read on a computer screen. One pixel equals one dot on a computer screen (this is the smallest division of your screen's resolution). Many web designers use pixels in web documents to ensure that the website appears pixel-perfect when displayed in a browser. The only problem is that the pixels cannot be enlarged to accommodate low-vision readers or reduced for easier reading on mobile devices Oh.

Points ( pt): Dots are traditionally used in printed publications(i.e. for everything that is printed on paper). One point equals 1/72 of an inch. Dots are very similar to pixels in that they have a fixed size and cannot be enlarged/shrinked.

Percentage ( % ): Percent is very similar to em , except for a few key differences. First, the current font size is 100% (i.e. 12pt = 100%). Using the Percentage unit allows you to enlarge/reduce your text for easier reading.

What's the difference?

The difference between these units is easy to understand at specific examples. Here's how they relate to each other: 1em = 12pt = 16px = 100%. Let's see what happens when we increase the main font size (using the body CSS selector) from 100% to 120%.

As you can see, Ems and Percentage increase as the base font size increases, but Pixels and Dots do not. It's easy to use an absolute size for your text, but it's much easier to use scalable text that displays on any device. Therefore, it is preferable to use Em and Percent units for the text of a web document.

EM or Percentage?

We found that Point and Pixel are not the best units for web documents. So, we are left with Em and Percent. Theoretically, Em and Percent are the same units, but in practice there are minor differences between them that cannot be ignored.

In the example above, we used the unit Percentage as the base font size (for the body tag). If you change base size font from Percent to Em (i.e. body ( font-size: 1em; )), then you most likely will not notice the difference. Let's see what happens when the body font size is 1em and when the client changes the browser's "Text Size" setting (this setting is available in some browsers, such as Internet Explorer).

When the text size in the client browser is set to "medium", there is no difference between Em and Percent. But if you change this setting, the difference will become quite noticeable. With the Smallest setting, the Ems are much smaller than the Percents. And with the “Largest” setting, the opposite is true - Em is much larger than Percent. You could say that Em units are scaled as they should be, but in practice such text is scaled too sharply, and on some devices the smallest text becomes unreadable.

Conclusion

In theory, the Em unit is the new standard for font sizes in web documents, but in practice it turns out that the Percent unit is more user-friendly. When client settings change, text that uses the Percentage unit scales appropriately, allowing designers to maintain readability, accessibility, and visual design.

Winner: percentage (%).

Usually when I create new design then for the body element I use percentages (body ( font-size: 62.5%; )) and then use em to scale further. As long as body is set to Percentage, you can use either Percentage or Em for any other rules and CSS selectors while still taking advantage of the benefits of using Percentage as your primary font size.

Over the past few years, this practice has become very common in web design.
Pixels are now used as valid units of font size (users can use the browser's "zoom" feature to read small text). However, the use of pixels becomes problematic due to mobile devices with very large screens. high density pixels (some Android devices and iPhone have a density of 200-300 pixels per inch, which makes 11 and 12 pixel fonts difficult to read). So, I continue to use Percentage as the main font size for web documents.

Percentage notation is usually used in cases where it is necessary to change the value relative to parent element or when the dimensions depend on external conditions. So, a table width of 100% means that it will adapt to the size of the browser window and change along with the window width.

Designations

	Description	Example
<тип>	Indicates the type of the value.	<размер>
A && B	The values must be output in the order specified.	<размер> && <цвет>
A \| B	Indicates that you need to select only one value from the proposed ones (A or B).	normal \| small-caps
A \|\| B	Each value can be used independently or together with others in any order.	width \|\| count
	Groups values.	[ crop \|\| cross ]
*	Repeat zero or more times.	[,<время>]*
+	Repeat one or more times.	<число>+
?	The specified type, word, or group is optional.	inset?
(A, B)	Repeat at least A, but no more than B times.	<радиус>{1,4}
#	Repeat one or more times separated by commas.	<время>#

Example

Width in percentage

Table Contents

Specification

Each specification goes through several stages of approval.

Recommendation - The specification has been approved by the W3C and is recommended as a standard.
Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
Working Draft - A more mature version of a draft that has been discussed and amended for community review.
Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
Draft ( Draft specification) - the first draft version of the standard.

Browsers

The following notations are used in the browser table.

- the property is fully supported by the browser with all valid values;
- the property is not perceived by the browser and is ignored;
- may appear during operation various errors, or the property is only partially supported, for example, not all valid values are valid or the property does not apply to all elements that are specified in the specification.

The number indicates the browser version from which the property is supported.