• Как рассчитать высоту каждого экрана лендинга?

    @BelkinVadim
    Frontend разработчик
    В CSS есть единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Это лучше чем под каждый экран в пикселях задавать, один раз задав высоту блоку width: 100vh он у вас на любом экране будет равен 100% высоты вьюпорта. Почитайте, например тут
    Конечно же если вам подходит их поддержка браузерами
    Ответ написан
    Комментировать
  • Как сделать transition в CSS от height: 0 к height: auto?

    @BelkinVadim
    Frontend разработчик
    Именно height с нуля в auto никак. Нужны числовые значения в данном случае для плавного перехода.
    Плюсую вариант Александр, тем более у вас там закомментирована максимальная высота, которую вы и могли бы использовать.
    Ответ написан
    Комментировать
  • Какое лучше всего событие подобрать?

    @BelkinVadim
    Frontend разработчик
    Если нужно отлавливать события при каждом перемещении ползунка, то используйте mousemove или touchmove если еще и на тач.устройствах нужно ловить.
    Если нужно ловить события только при установки ползунка и отжатия кнопки мыши или тачпада (передвинули ползунок и отцепили его), то mouseup или touchend для тач.устройств.

    В обоих случаях начинать слушать эти события нужно только после нажатия на ползунок, т.е. после mousedown или touchstart вешаете обработчики на нужные события (на mousemove или на mouseup), в по срабатыванию mouseup или touchend убираете с них обработчики

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

    @BelkinVadim
    Frontend разработчик
    Если по-быстрому, то вынести из медиа выраженя все стили и удалить из скрипта все что связано с ресазом, примерно так. А если по-хорошему, то самому объединить стили из медиа выражения с обычными стилями
    Ответ написан
    Комментировать
  • Как в нумерованном списке добавить точку после цифры?

    @BelkinVadim
    Frontend разработчик
    Пример
    content немного доработать
    li:before {
          content:counter(myCounter) ".";
        }
    Ответ написан
    Комментировать
  • Как сделать так, чтобы у элемент был с самого начала на нужной позиции?

    @BelkinVadim
    Frontend разработчик
    Поскольку блок с фиксированным позиционированием он выпадает из общего потока и все что было после него поднимается по потоку вверх (на место этого блока). Чтобы такого не было вам нужно каким-то способом сдвинуть содержимое после блока вниз на величину его высоты, ну наприм, если шапка у вас в самом начале кода, вы можете добавить для body вверхний паддинг равный высоте данного шапки. Если же резмер динамический и может меняться, то придется задействовать скрипты.
    Еще советую почитать про position sticky (или тут), возможно это лучше подойдет для решения проблемы
    Ответ написан
  • Возможно ли анимировать svg средствами css, если используется иконочный шрифт?

    @BelkinVadim
    Frontend разработчик
    Не понятен ваш вопрос, а точнее связь svg и иконочного шрифта.
    Если вы svg иконки упаковали в шрифт и используете через него же, то анимировать можете все то что и у обычного текста: размер (через font-size или transform), цвет (но только монохром, для конкретных элементов иконки цвет не задать), прочие трансформации через transform. Т.к. иконка в этом случае это текстовый символ, то стили применяются к элементу внутри которого этот символ либо по родителю выше если ближайшие родители ничего не перекрывают своими стилями.
    Ответ написан
    2 комментария
  • Как начальник может контролировать фрилансера по часам удалённо?

    @BelkinVadim
    Frontend разработчик
    Я использовал TopTracker. Программа может делать скриншоты экрана (экранов если их несколько, и даже с веб камеры, все это настраивается и отключается) в установленный интервал времени и отправляет его на сервер, ведет трекинг времени и привязывает скриншоты к рабочим промежуткам времени. Можно отменять сделанный скрин, если вдруг засветилась конфиденциальная инфа например, можно трекать время вручную (без скринов получается), например что вы с 9 утра до 12 работали.
    Как я понял, сам начальник регистрировался, создавал в аккаунте проект. Подключал меня к нему, я мог просматривать свой учет времени и редактировать его.
    Ответ написан
    4 комментария
  • Можно ли как то объединить несколько CSS файлов без повтора кода?

    @BelkinVadim
    Frontend разработчик
    Используйте какой-нибудь оптимизатор стилей.
    Можно найти сервис, например, либо если стили собираются сборщиками найти подобный плагин для вашего сборщика, например csso
    Ответ написан
    Комментировать
  • Почему не ловит значение из CSS?

    @BelkinVadim
    Frontend разработчик
    Исправленный пример
    Стили прописанные в css (не инлайн), можно получить через getComputedStyle , через element.style их не получить.
    Еще инфа
    Ответ написан
    Комментировать
  • Как узнать высоту клавиатуры и нижнего бара на iOS Safari?

    @BelkinVadim
    Frontend разработчик
    Сам мучался с этой проблемой. На iOS клавиатура никак не влияет на размер окна и вьюпорт. Она просто открывается поверх окна и страницу при этом может как бы проскроллить вверх если место куда вводится текст находится в том месте где появится клавиатура. Причем скроллится на страница (html, body теги), а фиг знает что, т.к. событие скролла не отлавливалось.
    Пришлось выкручиваться так, я отлавливал событие фокус на полях ввода (вообще на всем что вызывает открытие клавиатуры), и по setTimeout в 500ms (клавиатура появлялась плавно и можно было правильно вычислить её размер только после открытия) выполнял следующее
    const innerHeight = window.innerHeight;
    document.body.style.height = innerHeight + 'px';
    document.documentElement.style.height = innerHeight + 'px';
    window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил


    решение не вау, и еще таймаут подводит если вдруг интерфейс тормознет и клавиатура появится с чуть большей задержкой, но другого к сожалению не придумал

    Ну и соответственно при закрытии клавиатуры (blur того же поля) нужно примененные стили сбрасывать
    document.body.style.height = '';
    document.documentElement.style.height = '';
    Ответ написан
    Комментировать
  • Можно ли не очищать value input?

    @BelkinVadim
    Frontend разработчик
    Перехватывать только нажатия delete или backspace не вариант, ведь удалять можно еще через контекстное меню. Плюс можно выделить весь текст и нажать клавишу с каким-то символом и все заменится на жэтот символ - такой вариант допустим?
    Если задача такая что разрешено ТОЛЬКО дописываться к текущему значению, а удалять все или часть или заменять все или часть на что-то другое нельзя, то вам нужно хранить текущее значение поля и при изменении (лучше на событие input, если поддержка устроит) сравнивать его с новым. В случае если новое значение не содержит в себе предыдущее значение плюс новые символы, то возвращать исходное значение
    Пример, проверяется содержится ли в начале нового значения предыдущее значение, если да, то в переменных обновляем переменную текущего значения для дальнейшего сравнения с ним, если не содержит - устанавливаем предыдущее значение. Работает как с удалением по кнопкам, так и через контекстное меню
    Ответ написан
  • Почему может не появляться горизонтальный скролл в сафари?

    @BelkinVadim
    Frontend разработчик
    Помог бы живой пример, а так только догадки:
    1. Тупо нет переполнения ширины, ничто не выходит за границы ширины и не вызывает появление горизонтального скролла
    2. Даже есть внутри есть очень широкий контент, может быть такое что у него есть доп.обертка с overflow: hidden которая просто скрывает неуместившееся и переполнения по ширине в блоке с overflow: auto; не происходит
    3. Может где-то overflow: auto; переназначается другими стилями на overflow: hidden

    И инфа на всякий случай, если вы вдруг ожидаете появление скролла без переполнения контентом - его не будет без переполнения, чтобы обязательно был скролл без переполнения нужно использовать  overflow: scroll
    Ответ написан
  • CSS: ширина в зависимости от высоты?

    @BelkinVadim
    Frontend разработчик
    Можно подробнее про требования, для чего и как это будет использоваться?
    Мне пока на ум пришла идея только с распоркой в виде картинки с нужными пропорциями, минимального размера и максимально ужатого качества, например белые jpg/png размерами 16x9px и 4x3px которые по высоте 100% и с автоматической шириной и сделанные невидимыми, а самим блокам задаем высоту и делаем их инлайн блоками. Задав фиксированную высоту блоку картинка находящаяся внутри растягивается на всю высоту блока и её ширина увеличивается пропорционально, растягивая сам блок по ширине на пропорции картинки. Плюс внутри можно создать доп.блок для размещения контента растянув и отпозиционировав его поверх всего.
    Пример
    Ответ написан
  • Как сделать в кастомном radio круг ровным?

    @BelkinVadim
    Frontend разработчик
    Могли бы вы приложить скриншот? У меня ваш пример отображается нормально. Вы же про круг чекнутой радиокнопки? Неровное выравнивание может быть из-за того что сам символ круга имеет нечетные размеры, а контейнер относительно которого он выравнивает - четные. Отсюда и смещение в 1 пиксель. Символ который вы используете в чекнутой радиокнопке размером не 30px, 30 - это размер текста, а размер данного символа меньше, фактический размер этого символа как раз и может быть нечетным
    Ответ написан
    Комментировать
  • Насколько в современной верстке важен pixel perfect?

    @BelkinVadim
    Frontend разработчик
    Все зависит на сколько важен для заказчика пиксель перфект и насколько дизайнер ответсвенно подошел к отрисовке макета. Если у пунктов списка слева один отступ, а справа другой - это не косяк дизайнера, с чего вы решили что отступы обязательно должны быть одинаковые со всех сторон. Другое дело когда список из одинаковых элементов и у пунктов могут отличаться отступы с одной и той же стороны - тут уже стоит выяснить почему так.
    Хорошо когда дизайн-система продумана от и до, систематизированы все отступы и размеры, такие макеты в пиксель перфект верстать легко. Но другое дело когда в разных макетах есть погрешности в размерах одних и тех же компонентов, а заказчик требует пиксель перфект ну потому-что ему так хочется и проверять соответствие для него легко.
    Просто научитесь оценивать сложность верстки по макетам для пиксельного соответствия и уже сами решайте стоит ли овчинка выделки (если конечно у вас есть возможность отказываться от заказов)
    Ответ написан
    Комментировать
  • Какую библиотеку для анимации использовать?

    @BelkinVadim
    Frontend разработчик
    Смотря какая анимация вам нужно и что под анимацией вы подразумиваете.
    Кто-то путает анимацию с плавными переходами между состояниями (CSS transition), в этом случае обходится все без библиотек, вы указываете стили элемента в одном состояние и указываете какие свойства должны плавно меняться, затем пишите стили для другого состояния где изменены плавноизменяемые свойства. При изменении состояния будет плавное изменение свойств.
    Есть именно CSS animation, где вы описываете саму анимацию и применяете её к нужным элементам. Есть разные библиотеки с наборами анимаций которые вы можете использовать у себя просто подключив или скопировав себе стили самой анимации и применив её в нужном месте. Например
    Бывают случаи когда анимация может создаваться динамически в зависимости от положения элемента, координат клика и прочих изменяемых и вычисляемых параметров. В таких случаях можно комбинировать JS и CSS для получения нужного результата, на JS вычисляете необходимые параметры и на их основе либо задаете свойства для анимации или плавных переходов.
    Ответ написан
  • Какую ширину воспринимает тег?

    @BelkinVadim
    Frontend разработчик
    Если фактическая ширина экрана в пикселях у вас 1125 и Device Pixel Ratio = 3, то делите фактическую ширину на ratio и получите ширину которую будет браузер как бы эмулировать.
    Т.е. если вы используете указанный метатег и добавите на страницу два блока с фиксированными ширинами , один 1125, а второй 375, то первый блок выйдет за границы экрана и появится горизонтальный скролл, а второй блок будет ровно по ширине экрана
    Ответ написан
    2 комментария
  • Как решить проблему с IE и EDGE при верстке на Flex?

    @BelkinVadim
    Frontend разработчик
    EDGE поддерживает флексы, IE поддерживает флексы с 10 версии, но с префиксами (поможет автопрефиксер). Но в IE есть особенности использования флексов, связанны с размерами элементов флекс-контейнера. Просто верстать под Хром и надеяться что в IE автопрефиксер все сделает как нужно не стоит, есть шанс что результат вас удивит. По этому рекомендую проверять сразу все наработки связанные с флексами
    Ответ написан
    1 комментарий
  • В чём проблема разницы расчёта ширины экрана?

    @BelkinVadim
    Frontend разработчик
    Возможно это поможет разобраться
    Ответ написан
    Комментировать