Ответы пользователя по тегу CSS
  • Есть реально адаптивные/responsive - вплоть до 4k (широкие экраны) шаблоны?

    @dragonesis
    Возможно и будет когда-то подобное решение. Но нельзя сравнивать сервисы однородного контента и классические сайты. Например https://www.youtube.com/intl/ru/yt/about/ на 4к. будет выглядеть пустовато, по сравнению с fullHD. Вероятно, то что вы хотите не достижимо еще и по тому, что будет нарушать маркетинговые задачи проекта. Ведь от пользователя нужно что-то, а если он будет окружен большим количеством второстепенного контента, то и основной потеряется.

    Так что, мне кажется так. Если хотите портфолио на всю ширину то вперед, если страницу о компании, то не стоит.
    Ответ написан
    Комментировать
  • Почему многие ругаются на flex и float? Что в таком случае использовать?

    @dragonesis
    Добрый день.
    Вы можете спокойно использовать флексы и учить на тестовых примерах гриды. И правильно сказали авторы выше. Мы, в нашей компании, поддерживаем до ie11, так что и с чистой совестью используем данные инструменты.

    Но важно знать о слабых местах флексов и старых браузеров, в том числе ie11. Тогда все будет хорошо. Как пример, ie11 и старый Safari не поддерживают свойство flex-wrap: wrap; Это свойство может применяться для создания сетки 3х3 блока к примеру. В этом случае, для этих версий уместно будет использовать свойство display: inline-block; Которое позволит вам получить искомую сетку в эталоне или близком к нему.

    Также не везде работает вертикальное центрирование и еще пару передовых фич.

    Но в целом. Если на практике вычислить то, что встречается чаще всего в багах, записываемых на флекс, то можно аккуратно обходить их теми или иными средствами. В конце концов не один из методов построения сеток не идеален.
    Ответ написан
    1 комментарий
  • Текстовый номер в верстке,на телефоне определяется как телефон?

    @dragonesis
    Если нет нужды в кликабельности данного номера на мобильных
    <meta name="format-detection" content="telephone=no">


    Если же кликабельность необходима, то изначально загоняешь под тег ссылки и её стилезуешь
    <a href="784222505295" class="class-name"><img src="/img/phone.png" alt="modal_phone">7 (8422) 250-52-95</p>
    Ответ написан
    Комментировать
  • Почему шрифт не отображется в указаном размере?

    @dragonesis
    Привет. У тебя не стоит мета тег viewport, из-за этого на мобильных девайсах и планшетах размеры пересчитываются под физические размеры экрана, т.е. разрешения 2048 x 1536. Обычной практикой является использование вышеупомянутого мета тега, с теми или иными характеристиками. Обычно я использую тег с такими, как ниже свойствами.
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>


    При использовании данного тега уже после верстки, могут возникнуть артефакты, которые придется устранять. Могут поехать блоки, сайт может не вписаться в отведенные области, т.к. изначально верстался под другое поведение.
    Ответ написан
    Комментировать
  • Как оценивать вёрстку?

    @dragonesis
    Возможно поступить следующим образом, так когда-то сделал я. Поискал фрилансеров топовых и не очень, всего около 30 человек опросил. Представлялся заказчиком, просил расценки и сроки по макету, спрашивал про технологии и просил портфолио посмотреть. После свел все в таблицу, оценил все полученные данные и вывел для себя стоимость часа работы. Взял тот уровень, за который был способен ответить + немножечко больше). Важный момент, так или иначе но нужно выяснять количество реальных проектов и постараться удостоверится, что они принадлежат этому человеку, иначе может картина не сростись. Ну и делать поправку на регион проживания дизайнера.
    Ответ написан
  • Адаптивный дизайн. Какими должны быть размеры экранов?

    @dragonesis
    Не совсем верно. Все зависит от начального дизайна. Следует учитывать, что требуется. Сегментированная адаптация или респонсиваня. Если сегментированая, то градации бутстрапа вполне подойдут. Если респонсивный, то в идеале продумывать его изначально, т.е. строить карту сжатия на листе и задавать ключевые параметры в ui гайде. Например у вас три блока одинаковой ширины. Ширина задается в процентах на верстке и нужно определить, какова минимально допустимая ширина этого блока. По достижении этой ширины блоки можно расположить друг под другом или же опустить один блок ниже, при этом задав размер им не в ~33% от размера рабочей области, а в 50%. И далее в таком ключе. Почему это важно? Потому что если это не сделать, то верстальщик либо вас доконает вопросами, либо сделает на свое усмотрение, в большинстве случаев плохо.

    Сетки размеров для базового представления можно взять те же. Также следует учитывать landscape режим просмотра, в котором достаточно мало остается вертикальной рабочей области. Особенно проблемным местом являются full page страницы.

    P.S.
    Сегметированный дизайн. Дизайн по строгим ключевым точкам, зачастую с жестким переходом в размерах рабочей области, сейчас применяется редко, в основном на сложно структурированных проектах или проектах с большим количеством жестко позиционированных элементов
    Пример:

    Респонсивный дизайн. Когда при верстке большая часть контента легко "сжимается" по ширине\высоте, подстраиваясь под размеры рабочей области. Вызывает проблему с неровным разбиением, что вынуждает предугадывать поведение блоков при изменении размеров экрана.
    Пример:

    UP.
    Касательно отступов, то все на усмотрение дизайнера. В том же бутстрапе не составит труда переменить размеры отступов, несмотря на предложенные им 15px, иногда требуется 60, 30, 15 и все в одном макете. Все зависит от вашего умения и виденья
    Ответ написан
    Комментировать
  • Как заставить корректно работать попап в safari ios8,9?

    @dragonesis Автор вопроса
    В итоге компромиссным решением стало для Safari на мобильных платформах, при активации попапа, делать высоту html&body в высоту экрана. Тогда все работает ровно и корректно.
    Ответ написан
    Комментировать
  • Где грань авторского права в верстке?

    @dragonesis
    С точки зрения закона об авторском праве, любой интеллектуальный труд, принадлежит его создателю, за исключением передачи всех исключительных прав на творение. Но вот с точки зрения бытовой логики все интереснее. Да, ты воруешь, но доказать это невозможно, да и никто не будет это делать. Но, если код запатентован, то в том и только в том виде, в котором он есть в патенте его использовать нельзя, тут уже могут быть колоссальные штрафы. Однако, сайтов столько, что уследить невозможно, только случайно или когда проект станет высоко посещаемым. Но к этому времени, от кода оригинала, вряд ли что-то остается).
    P.S.
    Не забывайте ситуацию с шоколадом Milka, при разработке крупных коммерческих проектов)
    Ответ написан
    3 комментария