andrey7287

Чем npm то не устроил, ставить ещё что то для компиляции ...

Пользуйтесь, если устраивает, к чему вопросы.

Ужос

Так у меня в резюме указанно - Семантичная, валидная верстка под google Chrome. Скрины обязательно сделаю и буду носить с собой -)

Время от времени я "развлекаю себя" походами на собеседования и могу вас заверить что многие компании ещё не отказались от IE10. Некоторые от IE9. А вот сбербанк до сих пор держит 8. Слууушайте, а может им скрин с реальной статистикой показать? как считаете ?

Свежо придание (с)

Ну не знаю, я бы не решился флексы полифилить. Угу, а вам рано в вёб разработку с таким подходом.

А знаете какой сайт мне нравится ? css-tricks. Посмотрите например как там реализованы резиновые шрифты. Просто уменьшайте постепенно окно браузера и смотрите исходный код. Никакой магии, обычный css. Сделайте тоже самое на сайте алфа-банка. Я ответил на ваш вопрос ?

Я вообще ни одного сайта не видел где прям вот всё, как вы пишите было нормально. Их не существует ! У фэйсбука постоянно какие то косяки с версткой, а эти люди, на минуточку, создали фреймворк который захватил интернет. Аналогичная сеть рунета vk, претендующая на кросплатформеность и универсальность, положила болт на доступность с клавиатуры. Про рядовые студии я вообще молчу. Самая мажорная и дорогая в России сделала сайт Альфабанку на который без слёз смотреть нельзя. Собственно я это к чему. Вы вообще не о том думаете. Делайте сайты удобными. Делайте сайты доступными. Ругайтесь с дизайнерами, менеджерами и заказчиками заставляющими убирать аутлайны. Применяйте элементы по назначению а семантика это дело десятое.

Вы хоть один сайт семантически верный, с кашерными тегами, атрибутами и прочими микроразметками видел ? Их не существует ! Семантику придумали для того что бы писать умные статьи. А если серьёзно, то с флексами можно раскидать всё как твоей душе угодно а в век прпроцессоров одного css файла вполне достаточно. Что именно рушиться. Покажите код и объясните с какими конкретно трудностями вы в нём столкнулись.

https://jsfiddle.net/0bL3m6mm/4/

Можно сверстать блоки с фоном отдельно от текстовых а потом позиционировать одни под другими и расставить индексы.

transform: translateX(-50%)

А почему он должен прятаться и причём тут z-index ?

<svg width="1010" height="682" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern patternUnits="userSpaceOnUse" width="1010" height="682" id="bkgImgLeft"> <image xlink:href="./images/bkg-left.jpg" width="1010" height="682"></image> </pattern> </defs> <polygon points="0,0 905,0 1007,341 905,682 0,682" fill="url(#bkgImgLeft)" stroke="#fff" stroke-width="3"></polygon> </svg> Как нарисовать полигон вы уже сами разобрались. Осталось только положить в него картинку.

C :before и :after вариант интересный, могу ещё JS посоветовать, задача то нетривиальная.

Когда нет флексов - display: table-cell это ваше всё. И если вы центрируете содержимое относительно соседнего блока марджином, вы верстаете не интерфейс а статичный кирпич

Да взять хотя бы вашу надуманную проблему с иконками. Вы понимаете что адаптация под телефоны подразумевает как минимум то, что вашим сайтом как минимум можно будет пользоваться ? Открывайте другие сайты и смотрите как сделаны на них мобильные версии. Прям сейчас на этом форуме уменьшите окно браузера и посмотрите. Это раз. Далее попробуйте сделать на своём сайте следующие вещи : Добавить/удалить пункт пункт из меню, ещё один телефон, уменьшить/увеличить объём текста, вставить картинку большего/меньшего разрешения. Это два. И если не можете делать элементарные сетки, верстайте таблицами.

В html есть picture, который не плохо поддерживается и полифилится. Но в данном конкретном случае нужен другой верстальщик, очень плохо там всё, я бы даже сказал отвратительно ... извиняюсь за резкость ...

Не помещать в контейнер "фон(ленточка)", только меню

letter-spacing + transform: translateX

Представьте что вам в офис пиццу привезли, порезанную на 12 кусочков и вам её нужно поделить на троих поровну. В результате каждый получит по 4 кусочка, 33.33333%. Если это не понятно то я не знаю ....

ещё один слой поверх картинки. В интернете полно сайтов с таким эффектом, открой и посмотри как это делается.

2 колонки Умножение появилось для того что упростить жизнь, но вы можете использовать сложение. 100 / 12 = 1 колонка 100 / 12 + 100 / 12 = 2 колонке Так понятнее ?

Откуда вы взяли 11 если колонок 12 ? ( 100 / 12 * 2 = 16.6666 )