Как правильно верстать некоторые вещи?

Очень давно хотел задать данные вопросы и услышать мнения по их поводу.
1). Как Вы задаете font-size? Лично я использую px и проценты, когда они нужны, но в большинстве случаев все таки px.
2). Как Вы выравниваете текст вертикально в кнопке? С помощью padding или line-height? Частенько вижу, что на сайтах используют padding, но, как я понял, это будет нормально работать только с обычными шрифтами, а с внешними будет криво, так как отступы в разных браузерах у них разные. Так как все таки лучше делать? Как правильно делать отступы для шрифтов, чтобы все четко было во всех браузерах?
3). Как поступать с внешними шрифтами? В Mozille сторонние шрифты (не говорю о сглаживании) иногда отображают совершенно по-другому. И почему-то именно в этом браузере. Схему использую такую - habrahabr.ru/post/113136
4). Как правильно встроить элемент в страницу, чтобы он вылезал из нее? К примеру, margin-left: -233px. Если сделать так, то работать будет, но появится горизонтальный скролл, что будет не очень выглядеть.
5). Очень часто дизайнеры рисуют input-ы без border, но с тенью. В некоторых браузерах, к примеру select в Safari, тень не отображает и выглядит не очень. Как поступать в данном случае?
6). Когда я смотрю цвет в photoshop и вырезаю картинку, то все время не сходится. Приходится смотреть цвет в каком-нибудь Paint. Из-за чего такое происходит?
7). Вопрос по спрайтам. Стараюсь выносить в спрайты мелкие элементы, которые встречаются всегда вместе. К примеру, main.png - спрайт, в котором только содержатся картинки, которые не могут существовать друг без друга. То есть я собираю спрайты по страницам. Чтобы странице 2.html не подгружать спрайт из другой страницы. Что можете сказать по этому поводу?
8). Если у меня длинные лендинг и весь background картинкой (к примеру, 10 000px в высоту), то есть никак разделить его нельзя. Есть ли смысл вырезать его по частям и если есть, то по сколько px в высоту?

Буду рад любым советам, как можно улучшить верстку.
  • Вопрос задан
  • 6169 просмотров
Пригласить эксперта
Ответы на вопрос 7
@BelkinVadim
Frontend разработчик
  1. В большинстве проектов раньше использовал px. В последнее время перешёл на em и rem, где возможно. Для меня во многом удобнее чем px, правда не везде. Так же не стоит забывать о поддержке браузерами rem, если решите использовать
  2. В 99% случаев выравниваю как Вы написали, padding и line-height. Самый удобный вариант. Со внешними шрифтами редко возникают проблемы. Не из-за того что у них отступы разные, а из-за того как выровнены символы относительно строки (в некоторых шрифтах символы могут быть смещены чуть выше или чуть ниже). Советую Вам использовать этот же метод. Просто на стадии дизайна, должен подбираться шрифт который "заточен" для веба.
  3. Подключаю так же. Для конвертирования использую fontsquirrel. Можно поэкспериментировать с настройками, для получения оптимального отображения в браузерах
  4. Родительскому контейнеру можно задать ширину 100% (чтобы растягивался по всей ширине окна) и overflow: hidden;
  5. Safari поддерживает тень, но чуть темнее она там отображается, если не ошибаюсь. (-webkit-appearance: none; )
  6. Скорее всего не сходятся цветовые профили. Почитайте тут
  7. Так же использую разделение спрайтов по группам (в основном при использование различных типов, размеров иконок в них). В большинстве случаев это удобно (если используется много иконок)
  8. С этим вопросом помочь не смогу, не изучал подробнее как большие фоновые изображения влияют на производительность и отображение
Ответ написан
Trow_eu
@Trow_eu
8. Я бы этому дизайнеру памятник воздвиг... нерукотворный... зато трехэтажный.
если не секрет, можете этот фон показать? ну мне так, для себя, чисто поржать.
Ответ написан
Комментировать
unclechu
@unclechu
  1. Всегда px;
  2. По идее нужно использовать line-height, но когда столкнулся с багом фичей отрисовски шрифтов на яблооси (ни на одной другой ОСи это не повторялось, шрифт смещён относительно центра), то стал использовать box-sizing: border-box; и выравнивание через padding-top;
  3. В фуррифоксе-то как раз со шрифтами всё хорошо, а вот хромоногий и его производные имеют с этим проблемы на шindows-ах, многие light-версии шрифтов в относительно небольшом кегле превращаются вообще не пойми во что, контуры частично исчезают. Делаю .otf, .woff, .svg (для старых IE .eot), вот пример с less миксином объявления шрифтов:

    @revision: 4;
    @tplPath: '/';
    @fontsPrefix: '@{tplPath}fonts/';

    .font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) {
    font-family: "@{fontname}";
    src: url("@{fontsPrefix}@{fontfile}.eot?v=@{revision}");
    src: url("@{fontsPrefix}@{fontfile}.eot?v=@{revision}#iefix") format("embedded-opentype"),
    url("@{fontsPrefix}@{fontfile}.woff?v=@{revision}") format("woff"),
    url("@{fontsPrefix}@{fontfile}.otf?v=@{revision}") format("opentype"),
    url("@{fontsPrefix}@{fontfile}.svg?v=@{revision}#@{fontfile}") format("svg");
    font-weight: @fontweight;
    font-style: @fontstyle;
    }

    @font-face { .font-face('Roboto', 'Roboto-Regular'); }
    @font-face { .font-face('Roboto', 'Roboto-Bold', bold); }
    @font-face { .font-face('Roboto-Light', 'Roboto-Light'); }
    @font-face { .font-face('Roboto-Medium', 'Roboto-Medium'); }
    @font-face { .font-face('Roboto-Thin', 'Roboto-Thin'); }
    @font-face { .font-face('Roboto Condensed', 'RobotoCondensed-Regular'); }
    ;
  4. Чтобы скролл не появлялся, — для родительского элемента ставится overflow: hidden;
  5. Используйте Modernizr, делайте изначально бордюр через outline, а при наличии поддержки теней (html.boxshadow ...) убирайте outline и делайте нормальный box-shadow, а в Safari пусть правят баги, это не ваша проблема;
  6. Возможно у вас JPEG, если дизайнер присылает рендеры не в PNG (или другом lossless), — бейте током;
  7. От спрайтов отказался в пользу SVG файлов, все элементы сайта, как правило — векторные, в условиях торжества мобильных платформ, — использовать для этого растр — неразумно, в редких случаях PNG (когда это имеет какой-то смысл или безисходность), JPEG только для фотографий;
Ответ написан
Комментировать
Oogway
@Oogway
1. Использую вертикальный ритм Compass, rem с фолбеком в px если нужно
2,3 Также padding и line-height, есть шрифты которые не правильно выровнены, но это проблема шрифта, лучше подбирать проверенные шрифты или от гугла e404.pw/articles/font-face
4. Можно скрыть полосы overflow: hidden; можно позиционирование использовать вместо margin, от ситуации зависит
5. Для стилизации селектов использую jquery плагины, чтобы везде одинаково было, или сбрасываю стили браузера (-webkit-appearance: none)
8. Залей одной картинкой и не парься, если никакой фрагмент фона нельзя использовать как паттерн или заменить цветом/градиентом, таков замысел дизайнера). Вообще конечно может имеет смысл обрезать, чтобы фон в верху сайта, который виден сразу загрузился быстрее
Ответ написан
Комментировать
kn1ght_t
@kn1ght_t
8. лучше резать на части, т.к. с некоторыми мобильными браузерами могут быть проблемы (например, можно здесь почитать про бг на сафари htmlcss.ru/Olga/verstka_pod_iphone_i_ipad_ogranich...
Ответ написан
Комментировать
@VaranCollins
Magento Frontend Developer
1). Перешел на rem. Но на всякий случай всегда дублирую(сначала px, потом rem)
2). Использую line-height.
3). Не использовать внешние шрифты?) Я стараюсь не использовать. FireFox это вообще отдельная песня.
4). overflow: hidden; А вообще разные ситуации бывают, можно и абсолютное позиционирование сделать.
5). Mac OS вообще все инпуты отрисовывает по своему. Если в проекте идет кастомизация всех инпутов то возможно стоит воспользоваться каким нибудь jQuery Form Styler.
6). Уже давно с Photoshop перешел на Avocode, и всем советую. Он своих денег стоит.
7). Перешел на SVG.
8). Надо как то обговаривать такие вещи с дизайнером.. Разрезать и подгружать нужное в нужный момент. Иначе это не айс.
Ответ написан
Комментировать
@lynnikvadim
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы