[18/18] Проверьте качество кода

BlackBeard · 15.Август.2018 18:52:09

.half-width {
display: inline-block;
width: 50%;
margin-right: -4px;
}

label {
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

.half-width input {
display: none;
}

.half-width input:not(:checked):not(:disabled)+label {
vertical-align: middle;
color: #7f8c8d;
}

.half-width input+label::before{
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #bdc3c7;
}

input[type=“radio”] + label::before {
border-radius: 50%;
}

input:checked + label::before {
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

input:checked + label {
color: #1abc9c;
}

input:disabled + label::before {
box-shadow: 0 0 0 3px #ecf0f1;
}

input:disabled + label {
color: #ecf0f1;
}

input[type=“text”] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}

input:required,
input:invalid {
border-color: #e74c3c;
}

input:disabled {
color: #bdc3c7;
background: #f5f5f5;
border-color: #ecf0f1;
}

input:invalid {
color: #c0392b;
background: #f2a097;
border-color: #e74c3c;
}

Valery_S · 15.Август.2018 19:41:59

Почему так?

Красим и выравниваем всё, а ниже нужное переопределим…

.half-width input + label{
    vertical-align: middle;
    color: #7f8c8d;
}

input:invalid {
  color: #c0392b;
  background: #f2a097;
  border-color: #e74c3c;  /* можно убрать, это свойство чуть выше уже прописано */
}

BlackBeard · 15.Август.2018 19:53:16

Да, и правда все работает как надо. Спасибо за подсказку:blush:

bremxx · 17.Август.2018 16:55:26

input[type="checkbox"], input[type="radio"] {
    display: none;
}

.half-width input:not(:checked) + label {
    vertical-align: middle;
    color: #7f8c8d;
}

.half-width label:nth-child(n+2)::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    vertical-align: middle;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px #bdc3c7;
}

.half-width input[type="radio"] + label:nth-child(n+2)::before {
    border-radius: 50%;
}

input[type="radio"]:checked + label::before, input[type="checkbox"]:checked + label::before {
    background: #1abc9c;
    box-shadow: 0 0 0 3px #1abc9c;
}

input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
    color: #1abc9c;
}

.half-width input:disabled + label:nth-child(n+2)::before {
    box-shadow: 0 0 0 3px #ecf0f1;
}

.half-width input:disabled + label {
    color: #ecf0f1;
}

input[type="text"] {
    width: 95%;
    height: 24px;
    margin-bottom: 10px;
    padding: 2px 5px;
    color: #000;
    border: 2px solid #bdc3c7;
    border-radius: 5px;
    vertical-align: middle;
}

input[type="text"]:required {
    border-color: #e74c3c;
}

input[type="text"]:disabled {
    color: #bdc3c7;
    background: #f5f5f5;
    border-color: #ecf0f1;
}

input:invalid {
    color: #c0392b;
    background: #f2a097;
    border-color: #e74c3c;
}

Valery_S · 17.Август.2018 19:36:04

Большинство селекторов можно написать короче.

Например первые два:

.half-width input {
    display: none;
}

.half-width input + label{
    vertical-align: middle;
    color: #7f8c8d;
}

nerealist · 04.Сентябрь.2018 18:13:36

Как по мне это испытание в 3 части - самое легкое из всех финальных по селекторам

magic form

body {
    width: 550px;
}

form {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #cccccc;
}

fieldset {
    padding: 10px;
    border: 1px solid #34495e;
    border-radius: 5px;
}

fieldset legend {
    color: #34495e;
}

.half-width {
    display: inline-block;
    width: 50%;
    margin-right: -4px;
}

label {
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
}

.half-width input {
    display: none;
}

.half-width input + label {
    vertical-align: middle;
    color: #7f8c8d;
}

.half-width input + label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    vertical-align: middle;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px #bdc3c7;
}

input[type="radio"] + label::before{
    border-radius: 50%;
}

input:checked + label::before {
    background: #1abc9c;
    box-shadow: 0 0 0 3px #1abc9c;
}

input:checked + label {
    color: #1abc9c;
}

input:disabled + label::before {
    box-shadow: 0 0 0 3px #ecf0f1;
}

input:disabled + label {
    color: #ecf0f1;
}

input[type="text"] {
    width: 95%;
    height: 24px;
    margin-bottom: 10px;
    padding: 2px 5px;
    color: #000;
    border: 2px solid #bdc3c7;
    border-radius: 5px;
    vertical-align: middle;
}

input:required,
input:invalid {
    border-color: #e74c3c;
}

input:disabled {
    color: #bdc3c7;
    background: #f5f5f5;
    border-color: #ecf0f1;
}

input:invalid {
    color: #c0392b;
    background: #f2a097;
    /*border-color: #e74c3c;*/
}

Valery_S · 05.Сентябрь.2018 02:14:06

У меня получилось абсолютно точно так же.

Для закрепления пройденного материала рекомендую пройти игрушку:

nerealist · 05.Сентябрь.2018 11:50:36

my english - so so

Поэтому начинал и забил потом так и не пройдя

Но спасибо, возможно в скором времени доберусь снова

Amr · 22.Ноябрь.2018 17:53:11

Поясните пжлст тогда пару моментов по коду. Мне наоборот это задание далось тяжелей всего. Остались вопросы в части этих правил:

Почему здесь убираем input?
.half-width input {
display: none;
}

Почему именно так? И зачем используем label?
.half-width input + label {
vertical-align: middle;
color: #7f8c8d;
}

Как образуется третье правило. В смысле, почему label с псевдоэлеметом ::before, который идет после input? То есть мы эти стили помещаем перед этим label? Почему именно туда?
.half-width input + label::before {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #bdc3c7;
}

Почему в четвертом закругление radio происходит с тегом label::before? В чем смысл этого псевдоэлемента здесь? Зачем прятать стили в лейбл? Работаем же с инпутами. И почему не работает при правиле напрямую без label?
input[type=“radio”] + label::before{
border-radius: 50%;
}

Правильно понимаю, что в этом случае input[type=“radio”] + label::before стили ставятся между radio и label?

Valery_S · 23.Ноябрь.2018 04:13:58

Смелее и больше экспериментируйте!
И всё проверяйте инспектором кода (вызывается по Ctrl+Shift+I или по F12).

Скрываем input, вместо их стандартного вида нарисуем другие…

Это правило написано для label.
Но, не для всех, а только для тех, которые идут после input.
Добавьте, например, временно свойство outline: 1px solid red;
и будет видно о каких label идёт речь.

(Цвет, кстати теперь должен быть #333).

input скрыты, но label которые к ним привязаны остались.
К этим элементам label – мы “пристёгиваем” псевдоэлементы ::before,
И свойства определяем уже для ::before.
Это правило – все эти бефор делает внешне похожими на input.

Попробуйте поменять ::befor на ::after и сразу станет понятно почему именно “туда”.

input мы скрыли, в коде они есть, но места больше не занимают.
На их место подвинулись label.
К label мы добавили псевдоэлементы ::before,
которые, в свою очередь, разместились перед label.

Это всё те же ::before, внешний вид которых определён чуть выше.
Но, здесь мы обращаемся не ко всем ::before, а только к тем, которые стоят вместо радиокнопок.
И эти ::before мы и делаем круглыми (остальные останутся квадратными).

Ещё раз.
Мы обращаемся НЕ к input, стили написаны НЕ для label.
Стили написаны для ::before, которые стоят ПЕРЕД label,
а label стоят ПОСЛЕ input[type=“radio”].

Я бы это селектор прочитал так:
Найти все надписи к радиокнопкам, и если у надписей есть псевдоэлемент – применить правило к этим псевдоэлементам…

.half-width input:disabled + label {
   color: #cecece;          /* самый светло серый */
}

Найти все надписи к заблокированным инпутам и применить к ним (надписям) цвет.

.half-width input:disabled + label::before {
    box-shadow: 0 0 0 3px #cecece;   /* самый светло серый */
}

Найти все надписи к заблокированным инпутам и применить цвет к псевдоэлементам этих надписей.

Спрашивайте… если не всё понятно…

Amr · 23.Ноябрь.2018 11:25:42

Очень классно поясняете. Спасибо большое за ответ! В целом все понятно.
Хотел еще уточнить пару моментов.

Это правило написано для label .
Но, не для всех, а только для тех, которые идут после input .
Добавьте, например, временно свойство outline: 1px solid red;
и будет видно о каких label идёт речь.

(Цвет, кстати теперь должен быть #333 ).

Как по этому блоку первоначально я мог понять, что это правило относится именно к этим label, которые идут после input? Если не методом тыка наугад, то как это понять? Просто я смотрел на цвет #333333 и думал «Хм, это что-то связанное с серыми элементами». А тут оказывается все строки выделяются разными цветом. Или надо было браться за другие правила (где стало бы ясней про цвет disabled, checked) и потом возвращаться к нему?

input скрыты, но label которые к ним привязаны остались.
К этим элементам label – мы “пристёгиваем” псевдоэлементы ::before ,
И свойства определяем уже для ::before .
Это правило – все эти бефор делает внешне похожими на input .

Интересно. Получается, что если бы мы не скрыли инпуты ранее, то before использовать не надо было. Правильно?

И последнее, это было специально такое задание, чтобы натренировать нас с ::before и стили к радио действительно работают плохо? Или в реальности можно не скрывать первоначально radiobutton и чекбоксы и просто писать стили к ним без ::before?

Valery_S · 24.Ноябрь.2018 02:52:28

Уже не помню как я проходил это первый раз.
Но, сейчас первое что сделал – дописал в коде для себя комментарии к цветам.
И хорошо что цветов несколько - по ним проще ориентироваться.

Потом определил основное правило для псевдоэлементов.
Потом всё остальное – по разным свойствам.

Где-то до сих пори приходится угадывать,
где-то временно добавлять outline, border, background.
Приходится всё ещё возвращаться к предыдущим курсам, кое-что забывается…

Очень помогает инспектор кода (DevTools).

Правильно. Но радиокнопки и чекбоксы стилизовать не получится.

В общем, ищите в google…

Вот сходу попалось и всё объясняет…
https://www.youtube.com/watch?v=XhO9UAiQ5Fk

Amr · 24.Ноябрь.2018 11:48:57

Понял. Спасибо большое за ответ! Очень помогло.

KSvetlana · 05.Январь.2019 13:58:26

body {
width: 550px;
}

form {
margin: 0 auto;
padding: 20px;
width: 400px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
}

fieldset {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
}

fieldset legend {
color: #34495e;
}

.half-width {
display: inline-block;
margin-right: -4px;
width: 50%;
}

label {
display: block;
margin-top: 10px;
margin-bottom: 5px;
}

input[type=“radio”],
input[type=“checkbox”] {
display: none;
}

input[type=“radio”] + label,
input[type=“checkbox”] + label {
color: #333333; /dark grey/
vertical-align: middle;
}

input[type=“radio”] + label::before,
input[type=“checkbox”] + label::before {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #a0a0a0;
}

input[type=“radio”] + label::before {
border-radius: 50%;
}

input:checked + label::before {
background-color: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

input:checked + label{
color: #1abc9c; /сильно голубой/
}

input:disabled + label::before {
box-shadow: 0 0 0 3px #cecece;
}

input:disabled + label {
color: #cecece; /цвет серый/
}

input[type=“text”] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}

input[value^=“Обязательное”]:required {
border-color: #e74c3c;
}

input[value^=“Заблокированное”]{
color: #bdc3c7;
background-color: #f5f5f5;
border-color: #ecf0f1;
}

input[value^=“Неверные данные”] {
color: #c0392b;
background-color: #f2a097;
border-color: #e74c3c;
}

Имеет место быть?Или все-таки как все сделали с последней частью (valid,invalid и т,д,),так правильней?

Hierumo · 05.Январь.2019 21:48:12

ну… лучше все же valid,invalid и т,д,

Maksov · 18.Январь.2019 08:32:30

Селекторы. Часть 3. 18/18

body {
  width: 550px;
}

form {
  margin: 0 auto;
  padding: 20px;
  width: 400px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 0 10px #cccccc;
}

fieldset {
  padding: 10px;
  border: 1px solid #34495e;
  border-radius: 5px;
}

fieldset legend {
  color: #34495e;
}

.half-width {
  display: inline-block;
  margin-right: -4px;
  width: 50%;
}

label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
}

.half-width input {
  display: none;
}

input + label {
  color: #333333;
  vertical-align: middle;
}


.half-width input + label::before,
.half-width input + label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: middle;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px #a0a0a0;
}

 input[type='radio'] + label::before  {
  border-radius: 50%;
}

 input:checked +label::before {
  background-color: #1abc9c;
  box-shadow: 0 0 0 3px #1abc9c;
}

input:checked + label {
  color: #1abc9c;
}

input:disabled + label::before {
  box-shadow: 0 0 0 3px #cecece;
}

input:disabled +label {
  color: #cecece;
}

input {
  width: 95%;
  height: 24px;
  margin-bottom: 10px;
  padding: 2px 5px;
  color: #000000;
  border: 2px solid #bdc3c7;
  border-radius: 5px;
  vertical-align: middle;
}

input:required {
  border-color: #e74c3c;
}

input:disabled {
  color: #bdc3c7;
  background-color: #f5f5f5;
  border-color: #ecf0f1;
}

input:invalid {
  color: #c0392b;
  background-color: #f2a097;
  border-color: #e74c3c;`

migozo · 27.Январь.2019 16:15:37

Не могли бы, кто разобрался объяснить мне, пожалуйста, зачем нужен вот этот участок кода:

{
color: #333333;
vertical-align: middle;
}

p.s. Визуально не вижу никаких отличий без его использования))