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

Question

[l2p]

Очень давно хотел задать данные вопросы и услышать мнения по их поводу.
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 в высоту?

Буду рад любым советам, как можно улучшить верстку.

Comments

[Андрей Гуртовой]

1. в пикселях, и использую переменные из scss
2. От случая к случаю. Если текст на кнопке в две строки то лучше сделать display: table-cell; и vertical-align:center;
3. приходится смотреть и сравнивать в виртуалках. если результат не устраивает то пляски с бубном в виде font-smooth, text-shadow и всё такое проче.
4. jsbin.com/saqore/1/edit?html,css,output
5. свистоплясками. Нужен готовый пример. Сложно сказать сразу.
6. часто не использую фотошоп поэтому хз. замеряю цвет пикселей на экране отдельным приложением.
7. используй что-то вроде compass и не придётся думать про спрайты. мелкие картинки будут склеиваться в спрайты без твоего постоянного участия. В идеале в спрайт должно попадать то что по статистике чаще всего загружается в данном разделе сайта.. И лучше бы спрайтов было не 999 а до десяти штук (чем больше файлов тем больше обращений к серверу и тем дольше первоначальная загрузка.)
8. не интересовался вопросом производительности если картинка большая. Но есть мысль что вся проблема будет таиться в долгой первоначальной загрузке этого изображения. особенно для мобильных устройств... Ну могу посоветовать оптимизировать картинку, уменьшить к примеру кол-во цветов, или закрасить сплошным цветом части картинки которые пользователь не увидит. Ещё можно ресайцнуть картинку на 20 процентов, а затем на сайте растянуть.
Также есть оптимизаторы картинок которые малыми жертвами(и даже без потерь качества) сжимают любое изображение. Я юзю ImageOptim , например вот это изображение yandex.st/lego/_/p_6IPaoqOdVv4542LygSmDURFk0.png с вебсайта yandex.ru сжалось без проблем на 50% было77222 , стало38188 .

Answer 1

[Вадим Белкин]

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. С этим вопросом помочь не смогу, не изучал подробнее как большие фоновые изображения влияют на производительность и отображение
   

Comments

[l2p]

4. Элемент должен отображаться, если раздвинуть экран, поэтому просто спрятать его не вариант.
5. Safari, как я понял, поддерживает тень, но именно у select-а она не работает - clip2net.com/s/39GWGb2

[Вадим Белкин]

4. jsfiddle.net/axecr98x Вот примерное решение. Элемент находится в контейнере, который имеет опр. ширину и выровнен по центру. И есть общая обертка которая равна 100% ширины окна с overflow: hidden. При большом размере окна элемент виден, при маленьком обрезается без скролла.
5. -webkit-appearance: none; Позволит добавить тень для select. Но пропадёт стрелка выпадающего списка. Можно её фоновой картинкой добавить. Пока единственное решение нашел

[l2p]

Вадим Белкин: Спасибо за ответ. Почему для Вам rem так удобен? em удобно использовать, когда как раз нужно наследование, но rem это не использует.

[Вадим Белкин]

Часто использую сетку сделанную через inline-block. Чтобы избавиться от свойственных inline-block отступов, у родительского контейнера сбрасываю размер шрифта на 0. А затем у самих элементов сетки восстанавливаю через rem. Так же при других обстоятельствах может понадобится сбросить шрифт на 0, а потом его восстановить. Кроме этого иногда у какого-то элемента задается шрифт (отличный от rem), а дочерним нужно задать размер текста такой же как основной на странице. Сам основной размер шрифта (rem) задаётся в одном месте, тем самым если потребуется увеличить весь шрифт на сайте или уменьшить - я поменяю только значение в одном месте.

[Андрей Гуртовой]

Вадим Белкин: а почему не используете для вёрстки препроцессоры аля стилус и сцсс ? . там можно размер текста задать в пикселях в одном месте, а затем везде это юзить, уменьшая как вам угодно и увеличивая.

[Вадим Белкин]

Не спорю, что предпроцессоры могут упростить задачу. Но предпроцессоры я бы отнес к "костылям" для стилей. Считаю, целесообразно использовать те их возможности, которых нет в CSS (если же приходится их использовать). Если не поддерживаете браузеры без rem, то не вижу смысла прибегать к помощи предпроцессоров для расчета размера текста. К тому же не во всех проектах может потребоваться использование предпроцессоров, а только ради расчета размера текста использовать их не вижу смысла.

Answer 2

[Trow_eu]

8. Я бы этому дизайнеру памятник воздвиг... нерукотворный... зато трехэтажный.
если не секрет, можете этот фон показать? ну мне так, для себя, чисто поржать.

Answer 3

[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 только для фотографий;

Answer 4

[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. Залей одной картинкой и не парься, если никакой фрагмент фона нельзя использовать как паттерн или заменить цветом/градиентом, таков замысел дизайнера). Вообще конечно может имеет смысл обрезать, чтобы фон в верху сайта, который виден сразу загрузился быстрее

Answer 5

[kn1ght_t]

8. лучше резать на части, т.к. с некоторыми мобильными браузерами могут быть проблемы (например, можно здесь почитать про бг на сафари htmlcss.ru/Olga/verstka_pod_iphone_i_ipad_ogranich...

Answer 6

[Илья Колин]

1). Перешел на rem. Но на всякий случай всегда дублирую(сначала px, потом rem)
2). Использую line-height.
3). Не использовать внешние шрифты?) Я стараюсь не использовать. FireFox это вообще отдельная песня.
4). overflow: hidden; А вообще разные ситуации бывают, можно и абсолютное позиционирование сделать.
5). Mac OS вообще все инпуты отрисовывает по своему. Если в проекте идет кастомизация всех инпутов то возможно стоит воспользоваться каким нибудь jQuery Form Styler.
6). Уже давно с Photoshop перешел на Avocode, и всем советую. Он своих денег стоит.
7). Перешел на SVG.
8). Надо как то обговаривать такие вещи с дизайнером.. Разрезать и подгружать нужное в нужный момент. Иначе это не айс.

Answer 7

[lynnikvadim]

https://habrahabr.ru/post/25827/