initial в CSS


One more step

Please complete the security check to access

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53406065d8618d63 • Your IP : • Performance & security by Cloudflare

CSS initial ключевое слово


Установите цвет текста элемента

Определение и использование

Ключевое слово initial используется, чтобы задать свойства CSS по умолчанию.

Ключевое слово initial может использоваться как для любого свойства CSS, так и для любого элемента HTML.

Версия: CSS3
JavaScript синтаксис:»initial» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает initial ключевое слово.

Ключевое слово
initial 1.0 12.0 19.0 1.2 15.0

Примечание: Ключевое слово initial не поддерживается в Internet Explorer 11 и более ранних версиях.


The initial CSS keyword is used to apply a property’s initial value as its specified value (value specified by the CSS author). This means that no matter what the cascaded or inherited value of the property is, it will be “reset” to its default initial value if it takes this keyword.

All CSS properties have initial values, hence, this keyword can be used with any CSS property.

Some CSS properties inherit their values from the cascading nature of CSS. For example, if you set a text color of an element, then all the descendants of that element will inherit the same text color. In such a case, you may want to reset the color of one of the descendants instead of having it inherit the color from its parent, so the initial keyword could be used to do just that. The same applies for properties that are not inherited, but you still want to reset their values to their initial values.


Assume that you have a container and that you have set the text color of that container to be of a certain color. The following resets the text color of all .original paragraphs inside that container to their default text color.

The following example will style all h3 tags and give them an italic font style. We’ll use the initial keyword to reset the font style to its initial value (which is normal ) for h3 tags that are found inside the sidebar.

Live Demo

Browser Support

CSS initial value

A CSS value that will apply a property’s initial value as defined in the CSS specification that defines the property

CSS initial Keyword

CSS initial keyword applies the initial value or default value of a property to an element.

CSS initial keyword applied to any CSS property. The initial keyword can be used to restore all CSS properties to their initial state.


The following table outline the usages and version history of this keyword.

Applies to: all elements
Version: CSS3
JavaScript Syntax: = «initial»


Here is a syntax for the CSS initial keyword


Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 19+
  • Internet Explorer 12+
  • Opera 15+
  • Safari 1.2+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Can I use CSS initial value?

Compatibility table for support of CSS initial value in desktop and mobile browsers.


  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

CSS initial value

Global usage

A CSS value that will apply a property’s initial value as defined in the CSS specification that defines the property

  1. 5.5
  2. 6
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76


  1. 2

  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72


  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11

  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81


  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP


  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

Getting Acquainted with Initial

Easily manage projects with

If someone walked up to me the other day and asked me what the difference between inherit and initial is, I may have replied:

Илон Маск рекомендует:  Hаиболее часто задаваемые вопросы в конференции ru dos basic

«What, there’s a difference?»

I’ve been writing CSS for more than ten years, but I’ve somehow escaped understanding what exactly initial is or does. Call it ignorance, laziness, or luck, but inherit has gotten me by and I never thought to look up when initial might be used instead. So, this post is gonna share some of the things I learned.

What initial means

First off, the spec helps us understand the difference between an initial keyword and an initial value.

  • Initial keyword: If the cascaded value of a property is the initial keyword, the property’s initial value becomes its specified value.
  • Initial value: Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

Umm, okay. I ran those definitions through Google Translate (joking!) and came out with this:

The initial keyword is what is declared as the property where the initial value is the resulting output, as defined by the browser default.

So, if the initial keyword is used here:

. then the initial value might return as black , if black is the browser default for that element’s property.

How it is different from inherit

If you’re thinking this sounds a lot like inherit , then you’re absolutely right. It does sounds a heck of lot like that.

But initial and inherit are distinct in the extra step that inherit takes to check whether there are other properties it can use in the cascade before it moves to the initial value.

H1 is looking to inherit a color value, which it finds in the body element. H1 is told to use its initial value, so it skips over the body element and goes to its roots.

An example of the difference

See that? The properties in the left box are all set to inherit the values of the .module class since it the parent element. On the flip side, the properties in the right box are set to initial , which resets the element’s properties to the browser defaults.

When to use initial

I like to think of initial as a hard reset. It’s easy for styles to get convoluted as CSS grows, and using initial is a way to clear things out so an element can go back to its natural state of being. If initial were old-school Nintendo, I would use it as the equivalent to pulling out a buggy game cartridge from the console and blowing into it (even though doing so supposedly had no effect).

But that doesn’t mean initial is a silver bullet for resets. That’s because initial values are still subject to browser defaults, which we know can vary from browser to browser.

Oh wait, you use CSS resets? You can expect those to be used as initial values instead.

Bottom line: I would use initial to completely wipe out any inherited styles from an element and use inherit to make sure the element takes its cues from the nearest parent.

A more practical use case

Here’s an example of how initial can be used to create alternating colored lines in tables.

Browser Support

MDN has a nice breakdown of the current support for initial . Note the glaring lack of IE support.

Chrome Safari Firefox Opera IE Android iOS
Yes Yes 19 15 No Yes Yes

Wrapping Up

I’ve been racking my brain for some interesting use cases for initial . While I see a lot of potential usefulness in being able to use default styles on an element, I just haven’t come across them in a practical application—though that could say a lot more about me than the property value itself.

Where this will come in real handy is when all gains more support as a property. That would make declaring all: initial a real powerful tool for creating resets on any element.

Please share any situations where initial was something you had to use in a project. Bonus points if you’ve used it for any tricky feats.


“Going to” not “gonna”.

Woowoo, that’s the sound of the grammar police!

display: none works for every element, and it’s useful when you want to hide something using a class.

But what if you want to display it back with the correct value for a given element, without creating multiple selectors for each element?

That’s right, you could use initial .

This, here, is precisely the reason I want initial to be supported everywhere.

It’s also worth noting that display: initial; seems to always return display: inline; so there could be some funkiness there if not used carefully.

Unfortunately, as Geoff point out, this nice use case wouldn’t actually work as you hope.

The initial value is defined for each property, (e.g., for display ), not for any particular tag name (e.g., li ). The association between HTML tag names and display types is applied via a browser style sheet, which is treated just as an ordinary CSS stylesheet that is run before processing any of your website’s styles. Those default styles get reset with initial just as much as your own code does.

In contrast, there are a very small number of properties, such as font-family , where the specs don’t specify an initial value. In that case, the browser’s default is the initial value. However, if the browser applies different font families for headings versus paragraphs, that is again the browser style sheet, and an initial value will reset them both to the same overall default (whatever that may be).

@Amelia: So the one use case I had for it is the use case it doesn’t work for? Ah well, there’s web dev for ya. Thank you for disabusing me of my hopes and dreams :D :D :D

It’d be great if there were yet another keyword for resetting to the browser default, along the lines of

to reset block-level elements to block , inline elements to inline , etc.

Oh wait, you use CSS resets? You can expect those to be used as initial values instead.

Is that true? My understanding was that it would still reset your styles to the browser default, not that which was set up in the reset stylesheet. I mean, I would love it if the latter were the case, and if it is, please, someone tell me so I can have at least one reason to be happy about CSS :)

I thought the exact same thing when I first started digging in, but found that CSS resets do indeed return as the value. You can play around with the example pen by adding a CSS reset and seeing how that impacts the style.

From what I can tell, initial will not use the values specified in reset. It may appear that it does, however, because the initial value for many properties is the same as what reset defines. This means that it just so happens to be the same as reset. Here is an example where initial is clearly not using the value defined in reset.

Paul’s correct. Although this would work in many cases, it is more by coincidence than design.

The point of most standard “CSS reset” techniques is to cancel out the browser’s default HTML stylesheet and instead set values to the CSS initial value. In these cases, you could use initial and get the same effect.

However, if you use any other type of CSS reset (to a value other than the initial value defined in the specs), you can’t recreate that with initial . For example, if you use a reset to change box-sizing to border-box on every element and before/after pseudo-element, that’s very different from box-sizing: initial .

Total lack of IE support makes it pointless.

Agreed, this makes IE pointless.

The IE team was/is sleeping all the time. When the great browsers are on to something, IE was/is nowhere to be seen!

IE is terrible. No doubt. But if they don’t support it, you can’t really use it. I hate it, but it is the way it is.

Some of the diagrams and prose in this post are a little misleading. initial is not equivalent to inheriting from :root , and it is not always the “browser default” either.

The initial value is independant of any values set in the cascade, including defaults set by the user-agent stylesheet! Case in point, the initial value in the above example pen causes the inner div to be inline instead of bock-level.

I can certainly see that, though the diagrams are illustrating a scenario rather than all cases. You are certainly correct here, though!

This keyword applies the initial value as defined in the CSS specifications. Sometimes this initial value makes sense (float: none), sometimes it’s there for historical reasons (background-repeat: repeat), and sometimes the spec writers made an essentially random-though-somewhat-defensible choice (color: black).

Looks like it resets to a value defined by the specifications, don’t matter what’s the default value of the element. So display will be inline to a , div , table and even option . To me it’s basically useless.

This article seems to have a fundamental misunderstanding of ‘initial’. It is nothing like ‘inherit’, and it has nothing to with what properties are set on the root, aside from the root not being commonly styled much.

‘Initial’ is just the value of a property before any value is set by a style sheet, whether it is a browser (aka “UA”) style sheet, author (web designer or developer) style sheet, or user style sheet.

The UA style sheet can be thought of as the “browser defaults”, and can vary much more from browser to browser. Those variations are mostly eliminated by reset stylesheets, which also remove a lot of useful values, like margins on paragraphs.

But all conformant browsers start with the initial value as defined in the spec. That’s why the UA style sheet has ‘div < display: block >’, but they don’t need a ‘span < display: inline >’, since inline is already the “default” initial value for the ‘display’ property anyway, regardless of what the element is, until a stylesheet sets it to something else.

‘Inherit’ on the other hand, means that the value is taken from the parent element in the HTML. Some properties, like ‘color’ inherit automatically, without having to set anything in the style sheet. That’s why if you have ‘color: green’ on a P tag, you don’t also have to set it on a SPAN inside the P (unless you are worried that the UA stylesheet has a color explicitly set for SPANs, but that is never the case).

If you use the ‘inherit’ keyword as a value, it forces inheritance of the value from the parent, even if it is a property that doesn’t normally inherit automatically, such as ‘float’. So if you had ‘float: inherit’ on element A, and the parent B of that element A had ‘float: left’, then element A would also float to the left inside the floating element B.

@Brad You are quite correct, except for one, slightly confusing thing: the initial and inherit keywords are similar in the specification, and are in fact defined in the same place. This is because they both override the usual rules for determining the value of a property. I believe this similarity of specification has led to a belief of similarity of function.

@tom I don’t think it is really accurate to say they “override the usual rules for determining the value of a property”. The keywords give a value to a property, same as any value does. Whether or not “initial” or “inherit” keywords have an effect still depends on selector specificity and order, whether or not ” !important” is there, and with author style sheets overriding UA style sheets, same as any other value.

What makes keyword values different from most others is that the used value varies from the specified value (not in itself unusual), but with “initial” getting its used value from the property’s initial value (as defined in the specification of the property), and “inherit” getting its used value from whatever its HTML parent’s used value. Those two effects are very different from each other, but they use keywords the same as any property would use a keyword, such as “none” or “solid”. All keyword values assign some meaningful value that generally depends on the property, and so do these. They both begin with the letter “i”, which I suppose can make it easier to confuse them.

The fact that they are defined in the same spec doesn’t make them similar, any more than “border” is similar to “background” because they are in the same spec. Nor are “solid” and “none” are similar (as border styles), just because they apply to the same properties in the same spec and are defined in close proximity to each other. The main thing that makes “initial” and “inherit” similar is that they can apply to any property.

To truly understand what these two keywords do when assigned to a property, you just have to understand what they mean as concepts. The meaning exist regardless of whether or not there was ever a keyword that could be used as a property value. I think some people get confused because the keyword is something you can set. But even when not set, all properties have an initial value and many, many properties inherit anyway. Having an initial value prior to any CSS rules applying is a very different concept than looking at the HTML hierarchy to see if the parent element has a property value (like color or font size) that also should apply to the child. Once you understand those two concepts, then the meaning of the keywords you can use should be very clear and distinct.

One more step

Please complete the security check to access

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534060835b8f8fe5 • Your IP : • Performance & security by Cloudflare

CSS initial Keyword


Set the text color of the


Definition and Usage

The initial keyword is used to set a CSS property to its default value.

The initial keyword can be used for any CSS property, and on any HTML element.

Version: CSS3
JavaScript syntax:»initial» Try it

Browser Support

The numbers in the table specifies the first browser version that fully supports the initial keyword.

Свойства CSS display и visibility: 6 примеров скрытия / отображения HTML-элементов

Свойства HTML display и visibility используются, чтобы вывести или скрыть HTML-элементы . Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :

Мы используем три элемента div , которые показаны в разделе 1 ( с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .

Посмотреть онлайн демо-версию и код

Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.

Посмотреть онлайн демо-версию и код

В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.

Посмотреть онлайн демо-версию и код

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility :

Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:

Данное значение используется в HTML-таблицах .

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div , который содержит маркированный список

    , элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.

При клике по ссылке скрыть меню для события клика используется код JQuery , чтобы применить свойство display: none к родительскому элементу div :

Посмотреть онлайн демо-версию и код

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial . Это сделает меню видимым, а ссылки сместятся вниз.

Демо-версия меню с использованием свойства visibility

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible , и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).

Пример использования свойства CSS visibility для HTML-таблицы

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 ( первый столбец слева ).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .

Применение свойства CSS display к таблице

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

  • Родительский div очерчен черной рамкой и занимает всю доступную ширину;
  • span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
  • Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span .

Данная публикация представляет собой перевод статьи « CSS display and visibility: 6 examples to show/hide HTML elements » , подготовленной дружной командой проекта Интернет-технологии.ру

Использование наследования в CSS3

28 июля 2015 | Опубликовано в css | Нет комментариев »

Легко упустить из вида свойство каскадности таблицы стилей. Многие разработчики знакомы со значением inherit (наследование), но есть еще несколько свойств наследования CSS3, о которых знают не все.

property: inherit;

Значение наследования означает: «Использовать то значение, которое присвоено родительскому элементу». Если значение не было однозначно задано родительскому элементу, то браузер будет искать выше по дереву документа, пока свойство не будет найдено. Если свойство так и не будет найдено, применится значение браузера по умолчанию. Пример кода CSS:

На практике значение наследования пригождается редко. Многие наиболее полезные свойства автоматически распространяются на дочерние элемента, например свойства шрифтов, размеров шрифта, цвета текста и т. п.

Значение наследования безопасно использовать в любых браузерах. Оно не поддерживается в старых версиях браузера Internet Explorer, таких как 6 и 7, но маловероятно, что сайт перестанет от этого работать.

property: initial;

Новое значение CSS3, начальное значение, возвращает свойство к значению, заданному браузером по умолчанию, например:

Полезно ли это значение? Возможно, хотя нельзя ожидать, что у всех браузеров одинаковое значение по умолчанию.

Это значение поддерживается во всех современных версиях браузеров: Chrome, Firefox, Safari и Opera от версии 15. Начальное значение не поддерживается в браузере Internet Explorer, но сложно представить ситуацию, где это стало бы серьезной проблемой.

property: unset;

Это несколько необычное свойство. При использовании незаданного значения, применится наследуемое значение, если оно есть. Если его нет, например, если незаданное значение у ненаследуемого свойства тени блока, то применится начальное значение, т. е., значение браузера по умолчанию.

Правда, трудно представить, где может пригодиться незаданное значение, и оно не очень широко поддерживается браузерами.

all: [ inherit | initial | unset ];

И последнее свойство, а не значение, которое называется все. Ему можно задать значения наследования, начальное или незаданное, чтобы повлиять сразу на все свойства, например, вернуть все свойства CSS к значениям браузера по умолчанию:

Это может быть альтернативой для файла стилей с ограниченной областью действия, если на страницу добавляются сторонние модули и нужно избежать конфликта стилей.

К сожалению, не все браузеры пока что поддерживают это свойство, но со временем оно может стать широко используемым.

Илон Маск рекомендует:  @viewport в CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL