Ответы пользователя по тегу HTML
  • Можно ли a вкладывать в button?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Можно, но проще сделать ссылку в виде кнопки или присвоить button role=link и через js указать путь для перехода.
    Ответ написан
  • Так сколько изображений надо готовить для адаптивного сайта (+ retina)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Бери одну картинку, размером "требуемая максимальная ширина экрана помноженная на два" и делай ее. Это самый простой вариант. Если хочется немного пооптимизировать, то бери две картинки - одна большая как в первом случае, а вторая - в два раза меньше. Оптимизировать отдельно для каждого устройства не обязательно - на скорость загрузки это особо не влияет. Картинки только не забудь сжать оптимизатором)

    Судя по всему, ты хочешь первый экран сделать с большой картинкой на всю ширину. Тогда ставь ее через background-image и медиа-запросы. В общем все)
    Ответ написан
  • Как отключить зум в мобильном сафари?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Сафари теперь не позволяет отключать зум, однако строка user-scalable=no в meta по прежнему полезна для запрета зума при нажатии на input
    Ответ написан
    Комментировать
  • Возможно ли открыть Вк в iframe?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Насколько я помню, в заголовках http можно установить разрешение на открытие своего сайта через iframe. Многие ресурсы запрещают это, чтобы пресечь разнообразные мошеннические схемы.
    Ответ написан
    Комментировать
  • Можно ли так назвать класс?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Называть классы лучше так, чтобы по названию можно было понять что он делает. Длинные имена в общем не проблема. можно попробовать использовать BEM-подход или взять оттуда некоторые принципы и написать собственную методологию. Например у меня все классы делятся на несколько категорий:

    row (горизонтальный блок на сайте)
    col (делит row на несколько секций)
    wrap (оборачивает компонент, который находится внутри col)
    item (сам компонент)
    text (текст, который находится внутри компонента)

    У каждой категории классов есть свой набор свойст которые к нему применяются. Например сетка работает с col-классами и следовательно, когда я вижу класс типа .col-width-50-s, то я знаю что тут структурный стиль для сетки, в котором присваивается ширина 50 процентов на мобилах. А класс item-table_caption это заголовок компонента-таблицы.
    Когда в голове создашь свою иерархию классов, то проблем с названием селекторов не будет и их очень легко читать/писать станет.

    У такого подхода есть как плюсы, так и минусы.
    Плюс - вы берете самые интересные решения из разных методологий и создаете инструмент под себя (мне нравится атомарный подход, mcss и bem, но у всех них есть свои недостатки)
    Минус - другие разработчики не всегда могут читать ваш код также легко как и вы. Однако, как показывает практика, методологии приходят и уходят и возможно изобретенный вами подход станет новым стандартом в будущем)
    Ответ написан
    Комментировать
  • Как поставить атрибут lang для мультиязычного сайта?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Для поисковиков надо использовать link-теги примерно с таким синтаксисом:
    <link rel="alternate" hreflang="es" href="http://www.example.com/" />
    <link rel="alternate" hreflang="en" href="http://en.example.com/" />

    Оба тега помещаются на каждую региональную страницу (в данном случае их две: испанская и английская). При большем количестве региональных страниц, соответственно увеличивается и количество тегов.
    Ответ написан
    Комментировать
  • Как сделать многоугольник с 12 мягкими углами как на картинке в CSS ??

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Такое лучше на svg делать.
    Сложные фигуры на css это баловство. Если заказчик хочет такую сложную штуку, то завтра он может попросить сделать ее еще сложнее (по закону Мерфи обычно так и бывает) и один хрен придется делать потом на svg. Так зачем тратить время на css-костыль и оттягивать неминуемое?)
    Ответ написан
    Комментировать
  • Как запретить, установить или убрать свойство hover?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Лучше всего прописать hover внутри медиазапроса min-device-width: 1280px.
    В 95 процентах случаев этого достаточно.
    Ответ написан
    Комментировать
  • Как загружать контент по очереди?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Можно сделать, но будет грузить дольше по факту. Не вижу смысла тормозить загрузку картинок и ждать сначала загрузки шрифтов. Пусть все грузится параллельно. Для красоты можно добавить прелоадер, чтобы после загрузки шрифтов он исчезал, показывая страницу, а картинки уже потом сами подгрузятся по ходу дела (либо ждать пока все загрузится а потом отображать страницу)
    Ответ написан
  • По каким причинам несколько полей не проверяются на предмет соответствия паттерну(атрибуту) в данном примере?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Поставь этим инпутам type=text и например pattern=[0-9]+ (надо тестировать и подбирать паттерн под свои нужды)
    Чтобы форма точно не проходила, надо использовать валидацию через js.
    Встроенная html5 валидация работает не везде одинаково, а на айфоне вообще не обращает внимание на атрибуты required и отправляет пустые поля на сервер.
    Ответ написан
    Комментировать
  • Стоит ли использовать в данном случае section и addres?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Оставляй карту в div. Section и article сейчас требуют чтобы внутри были теги h2-h6, хотя это и спорный момент.
    Контактную информацию можно положить в address.
    Ответ написан
  • Как правильно отключить масштабирование на iphone?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    User-scalable=no перестал поддерживаться в ios10(и возможно на некоторых других платформах). Признан плохой практикой.
    Ответ написан
    Комментировать
  • Bootstrap. Cпор с программистом, как убедить?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Я думаю таких людей сбивает с толку слово framework. Они привыкли что в серьезных языках программирования это хорошо и правильно, но забывают про то, что CSS это в большей степени инструмент дизайна, чем программирования. Тут этим словом более уместно называть сетку или reset-файл, но никак не это нагромождение плохоимплементированных стилей. Будем откровенны: Bootstrap слишком корявый. И чем сложнее дизайн макета, тем корявей получается верстка, ибо начинаешь уже бороться с самим бутстрапом, пытаясь заставить его принять требуемую форму. Ваш Тим-лид, я почти уверен - бэкендер) Они обычно славятся любовью к бутстрапу) Могу только посоветовать обьединить усилия с дизайнером, так как ему наверняка тоже придется утихомирить свой художественный талант и жить в рамках "фреймворка".
    Ответ написан
    Комментировать
  • Как разместить элементы по дуге?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Через svg это можно сделать, вроде
    Ответ написан
    Комментировать
  • Как ведет себя блочный img?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Она расширяется как-бы, но картинка это inline-replaced элемент, и она рисуется в соответствии со своими размерами, а остальное пространство забивается margin-ом.
    Display: block не обозначает что элемент расширяется на всю ширину. Он занимает столько места, сколько внутри у него есть контента (или фиксированная ширина), а следующий за ним элемент переносится на новую строку.
    Ответ написан
  • Section или article?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Лучше использовать div и не заморачиваться)
    Ответ написан
  • Как правильно верстать под ретину?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Ретина только на картинки влияет, делая их размыленными. Самый простой способ - бери все изображения с увеличенным в 2 раза размером.
    Например нужна картинка 100 на 100 пикселей на сайте - бери картинку 200 на 200 и указывай ей размер в css 100x100.
    Таким образом ты заставишь ретина-дисплей отображать картинку с двойной плотностью пикселей.

    Есть еще экраны с х3 или х4 плотностью, но я не замечал стлной разницы в качестве изображений на них, так что можно забить.

    Если хочешь немного увеличить производительность и скорость загрузки сайта - можешь определять плотность пикселей и выдавать под ретину большие картинки, а под простые экраны - обычные. Я лично тоже забил на этот геморрой, так как в целом простота поддерживаемости кода и удобство его написания перевешивают плюсы от увеличения производительности.
    Ответ написан
  • Flexbox. Не понимаю, как сверстать?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Делаешь три колонки:

    В первой колонке создаешь два ряда. Во втором из этих рядов делаешь еще две колонки.

    Во второй колонке делаешь два ряда.

    В третьей колонке делаешь тоже самое что и в первой.
    Ответ написан
    2 комментария
  • Code review верстки новичка + вопросы?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    По html пробежался:

    У тебя есть места где тег h2, h3 идет перед h1. Так делать не принято (хоть и не считается ошибкой при валидации). Почитай про html document outline - это система структурирования документа по заголовкам и секциям.

    Встречаются пустые конструкции из дивов, которые видимо используются в презентационных целях и захламляют документ (лучше использовать псевдоэлементы before и after для этого)

    Презентационные картинки типа иконок не нуждаются в заполнении аттрибута alt (оставить его пустым лучше, но не убирай) и можно добавить role=presentation. Картинки не адаптированы под ретину (почитай про аттрибут srcset).

    Input'ам, без описательного тега label, не нужен аттрибут title (он не на всех скринридерах работает и на мобилах он не отображается) Если решили уж делать поле ввода без label, то пусть лучше аттрибут placeholder описывает максимально, что требуется от простого пользователя, а для пользователей скринридеров использовать aria-label.

    Последний момент: если хочешь прям ваще чтоб идеально было, то надо внедрять в код wai-aria, но спешу тебя обрадовать, что об этом любят только говорить всякие гуру на конференциях, а на деле практически никто это не внедряет правильно, так как требуется в WCAG и Section508

    Ну в остальном все нормально в общем, кроме всяких вещей субьективных типа структуры вложенности дивов. Я лично не люблю когда их очень много, но некоторым так удобней держать в голове структуру документа. Сам сайт не сравнивал с кодом, поэтому мог не заметить каких то еще явных косяков - пробежался просто поверхностно глазами по html на гитхабе.
    Ответ написан
    Комментировать