Задать вопрос
  • 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 не обозначает что элемент расширяется на всю ширину. Он занимает столько места, сколько внутри у него есть контента (или фиксированная ширина), а следующий за ним элемент переносится на новую строку.
    Ответ написан
  • Как оптимизировать onscroll?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Не слушай фанатиков Реакта)
    Они его даже в текстовый документ пытаются засунуть)
    Идеальную прокрутку на 60fps скорее всего не получится сделать, но можно приблизиться к идеалу, задействовав requestAnimationFrame. И еще будет иметь значение, какое именно свойство ты пытаешься анимировать при скролле. Максимальная производительность у opacity, translate, rotate и scale
    Ответ написан
  • Section или article?

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

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

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

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

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

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Только через джаваскрипт-событие mouseover
    Ответ написан
    Комментировать
  • Как задаётся местоположение в backgrond-positiion?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Все немного сложнее.
    10 процентов по оси X = 10% ширины контейнера - 10% ширины картинки.
    Тоже самое верно и для оси Y
    Так сделано специально, чтобы, например, при позиционировании background-position: 100% 100%; картинка не уезжала за пределы экрана, а прижималась к правому нижнему краю.
    Алгорит рассчета такой: сначала сдвинуть картинку вперед на 100 процентов от ширины контейнера, потом вернуть ее назад на 100 процентов от ширины картинки.
    Ответ написан
    Комментировать
  • Как задать позиционирование отдельному флекс элементу по главной оси?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Item3 дай margin-left: auto;
    Ответ написан
    Комментировать
  • 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 на гитхабе.
    Ответ написан
    Комментировать
  • Как сделать плавное открытие пунктов меню?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Добавь свойства transition: max-width .2s; и max-width: 0px; к скрытым элементам.
    Когда инпут становится :checked то пусть у скрытых элементов max-width становится 1000px допустим.
    Ответ написан
    2 комментария
  • Почему Мозилла не высчитывает процент?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Это особенность поведения firefox. В спецификации нет четкого правила, как должны вести себя браузеры если вертикальный margin или padding указывается в процентах внутри флекс контейнера. На выбор браузерам там предоставляется два возможных поведения - значение исчисляется относительно ширины контейнера или относительно его высоты. Firefox считает вертикальный margin/padding в процентах относительно высоты контейнера. Так что надо либо отказаться от процентов, либо задать контейнеру высоту.
    Ответ написан
    Комментировать
  • Textarea в firefox?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Дай ему display: block
    Ответ написан
    Комментировать
  • Как не применять определенные стили css для mobile?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Лучше использовать медиа запрос для max-device-width. Чтобы стиль совсем не применялся поставьте ему значение inherit | initial или явно укажите значение по умолчанию для таких устройств.
    Ответ написан
    Комментировать
  • Что делать с iOS и значением required d HTML?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Safari (на ios точно) не обращает внимания на этот аттрибут. Javascript в помощь.
    Ответ написан
    Комментировать
  • Корректность использовани тега i для иконок?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Есть мнение, что как раз семантично и правильно делать это через тег i
    Ранее, до html5 этот тег был просто презентационным и использовался для italic текста, но позднее был переопределен под любой текст, написанный отличительным манером от основного текста. Вот что говорит mdn:

    The HTML Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character

    Fictional character это как раз наш вариант с иконками.
    Ответ написан
    Комментировать