Реально както сократить код?

Question

[Roman Egliens]

Реально ли както эту записюльку сократить? я про хвер и про фокус.

.form__input {
	height: 36px;
	width: 268px;
	font-size: 13px;
	border: none;
	border-bottom: 1px solid #bababa;
	outline:none;
	margin-bottom: 15px;
}

.form__reg_placeholder::-webkit-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::-ms-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::-ms-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::placeholder {
	color:#acacac;
}

.form__input:hover {
	border-bottom: 1px solid #000;
}

.form__reg_placeholder:hover::-webkit-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::placeholder {
	color:#000;
}

.form__input:focus {
	border-bottom: 1px solid #000;
}

.form__reg_placeholder:focus::-webkit-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::placeholder {
	color:#000;
}

Comments

[Август Милович]

Я думаю сократить можно, посмотрите, что такое gulp, попробуйте его установить, там есть штука, которая всё это за вас будет делать (autoprefixer), если немного знаете js, то всё поймете. Это того стоит. Вот видео, в котором всё отлично объясняется, сам по нему все делал. https://www.youtube.com/watch?v=9qbdCruqpys

Answer 1

[Владимир Проскурин]

-ms-input-placeholder - такого не существует. Также вы забыли -moz-placeholder.
Я не думаю, что это можно сократить. Группировать нельзя, т.к. если один из селекторов группы не поддерживается браузером, весь блок будет проигнорирован. Если вы используете автопрефиксер, то вас не должно заботить ручная расстановка префиксов.
UPD: а, ну можно скрупировать focus и hover для каждого браузера

.form__reg_placeholder:hover::-webkit-input-placeholder,
.form__reg_placeholder:focus::-webkit-input-placeholder {
  color:#000;
}

Типа вот так

.form__input {
  height: 36px;
  width: 268px;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid #bababa;
  outline:none;
  margin-bottom: 15px;
}

.form__reg_placeholder::-webkit-input-placeholder {
  color:#acacac;
}

.form__reg_placeholder::-moz-placeholder {
  color:#acacac;
}
 
.form__reg_placeholder::placeholder {
  color:#acacac;
}

.form__input:hover,
.form__input:focus {
  border-bottom: 1px solid #000;
}

.form__reg_placeholder:hover::-webkit-input-placeholder,
.form__reg_placeholder:focus::-webkit-input-placeholder {
  color:#000;
}

.form__reg_placeholder:hover::-moz-placeholder,
.form__reg_placeholder:focus::-moz-placeholder {
  color:#000;
}

.form__reg_placeholder:hover::placeholder,
.form__reg_placeholder:focus::placeholder {
  color:#000;
}

Comments

[Roman Egliens]

Спасибо!

Я видимо копируя допустил ошибку.
Хороший и простой вариант, до которого я не не додумался. Текст уже будет короче.
Сократилось на 22 строчки)))

Answer 2

[irishmann]

Минификация