понимание унаследованного CSS currentColor

мне было любопытно, о currentColor и как он ведет себя, когда это унаследовала и / или используется в других свойствах. Другим аспектом является пропуск значения цвета в свойстве border -, например, которое должно по умолчанию иметь цвет текста.

.outer {
	color: #f90;
	border: 5px solid;
	box-shadow: 0 0 15px;
	text-shadow: 2px 2px 3px;
}
<div class="outer">
	Outer Div
</div>

ничего необычного в приведенном выше фрагменте.
Тени и граница того же цвета, что и текст.

теперь наследуют цвет:

.outer {
    color: #f90;
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}

	
	.inner {
	    color: lime;
	    display: inline-block;
	    border: inherit;
	    box-shadow: inherit;	    
	}
<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

Resutls:

в IE11 & Chrome 43 только цвет текста-лайм.
В Firefox 38 С другой стороны, тени тоже зеленые. (обратите внимание не на границу)

при активной настройке всего на currentColor браузеры показывают тот же результат, отображая только текст в lime и все остальное в orange. (Как вы можете видеть в последнем фрагменте на снизу)

/**
 * playing with currentColor
 */
body {background: darkgray;} /* friendly wink */ 
.outer {
	width: 85%;
	color: #f90;
	border: 5px solid;
	box-shadow: 0 0 15px;
	text-shadow: 2px 2px 3px;
	padding: 15px; margin: 15px;
}
.outer.currentColor {
	border: 5px solid;
	box-shadow: 0 0 15px currentColor;
	text-shadow: 2px 2px 3px currentColor;
}
	
	.inner {
	    color: lime;
	    display: inline-block;
	    border: inherit;
	    box-shadow: inherit;	    
	}
	.inner.resetting {
		border-color: currentColor;
		/* text-shadow-color: currentColor; /* does not exist */
		/* box-shadow-color: currentColor; /* does not exist */
	}
<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

<div class="outer currentColor">
	Outer Div	
	<div class="inner">
		Inner Div with CurrentColor	
	</div>
	<div class="inner resetting">
		Inner Div with CurrentColor
	</div>
</div>

вопросы:

  • почему существует разница с границей в Firefox при опущении currentColor
  • почему наследование не использовать значение цвета на том же элементе?
  • есть ли способ использовать те же свойства и переключать цвет? (для цвета границы есть, как вы можете видеть в Примере, сбросив это)

вот также ссылка dabblet, если вы хотите поиграть с ним:
http://dabblet.com/gist/587ea745c7cda7a906ee

9
css css3 inheritance

2 ответов

Итак, несколько вещей здесь:

  1. рабочая группа CSS согласилась изменить значение currentColor между уровнем цвета CSS 3 и уровнем цвета CSS 4. В (определением от текст-тень просто указывает на box-shadow).

6
  • почему есть разница с границей в Firefox при опущении currentColor

спецификации CSS для наследования на text-shadow говорят, что он должен наследовать .inner currentColor если он сам находится в inherit, но box-shadow не указан и выглядит так, как браузеры несовместимы с реализацией. Возможная ошибка.

  • почему наследование не использует значение цвета в той же элемент?

похоже, он наследует вычисляемые значение, а не введенное. Пример:

.outer {
    color:red;
    box-shadow: 2px 2px 2px; /* color omitted */
}
.inner {
    box-shadow: inherit;
 /* translates to:
    box-shadow: 2px 2px 2px red; */
}

как я уже сказал, это некорректная реализация.

  • есть ли способ использовать те же свойства и переключать цвет? (для цвета границы есть, как вы можете видеть в Примере, сбросив его)

как насчет явного дублирования не наследуют? Это дайте вам лучший результат, не приводя к SASS / LESS, imo. 

.outer {
    color: #f90;
}

.outer, .inner {
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}
	
.inner {
    color: lime;    
    display: inline-block;
}
<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>
2