Официальный сайт движения «Москва без Лужкова!»
Главная Новости Москвы Наши новости Популярное
  • Новости
  • Новости
  • ВХОД В ЛИЧНЫЙ КАБИНЕТ
    логин
    пароль
       
      Где купить переходник на фотоаппарат

      Я решила попробовать заработать в интернете на фотографиях, и приобрела хороший фотоаппарат. Спустя некоторое время я захотела снимать мелкие объекты, например песчинки песка или капельки воды. Но

      Уборка квартир в москве
      Проф уборка квартир в москве позволяет не беспокоиться о кавардаке, который повстречает Вас либо Вашу вторую половинку. Если Вы закатывали гулкую вечеринку, а на утро остались совершенно одни, то конкретно

      Оклейка авто в Москве
      Наверняка всем автомобилистам знакома ситуация, когда любимый железный конь требует устранения возникшей неисправности, а на СТО говорят, что рабочий день мол заканчивается, а завтра так и, вообще выходной.

    Новости

    Антигерой CSS-розмітки - властивість «display: table»

    1. Два типу табличній розмітки
    2. Є ключова відмінність
    3. Динамічне вертикальне вирівнювання по центру
    4. Динамічне горизонтальне вирівнювання по центру
    5. адаптивна верстка
    6. Динамічний прилипає підвал
    7. Розмітка «Holy Grail»
    8. Ви шуткуєте? Flexbox все вирішить!
    9. висновок

    Відновлення підмочену репутацію CSS-таблиць Антигерой

    - один з центральних персонажів фільму, книги або п'єси, що не володіє звичайними героїчними якостями.

    Використання таблиці в розмітці - делікатна тема. Для багатьох веб-розробників таблична верстка - табу. Хоча існує безліч доводів проти цього , Більшість розробників не можуть чітко пояснити, чому не можна використовувати табличну розмітку, крім того, що «таблиці - це погано».

    Імпульс від давнього початку руху проти використання HTML-таблиць був сильний. Він вплинув на багато поколінь розробників, змусивши їх думати, що будь-яке використання таблиць - зло.

    Треба зізнатися, я один з тих розробників, хто уникає табличній верстки навіть для представлення табличних даних. Мало того, я навіть дорікав своїх колег, коли вони використовували display: table для колоночной розмітки (або розмітки « Holy Grail »).

    Озираючись назад, я розумію, що з упертістю, гідною кращого застосування, витрачав величезну кількість часу на те, щоб «заточити» CSS під потрібну мені завдання.

    Два типу табличній розмітки

    Використовувати таблиці в верстці можна двома способами: це HTML-таблиця і CSS-таблиця.

    HTML-таблиця - це коли для створення таблиці використовується нативний HTML-тег <table>, а CSS-таблиця - це імітація того ж поведінки, але за допомогою CSS-властивостей.

    Є ключова відмінність

    Як і ті, хто навчався за « CSS Zen Garden », Я відчуваю огиду до табличній верстці в HTML. Сам того не розуміючи, я дозволяв оманливим упередженням ввести себе в оману, перебільшуючи взаємозв'язок між HTML- і CSS-таблицями.

    Якщо щось виглядає, працює і поводиться як таблиця, то воно має ж бути таблицею? Неправильно!

    Насправді, у CSS-таблиць є одна ключова відмінність від HTML-таблиць: вони можуть перестати бути таблицями, варто тільки змінити їх CSS-властивості. А HTML-таблиці на таке не здатні. Це відкриває перед нами широкі можливості вибіркового використання в верстці потрібних табличних особливостей.

    Нижче ви знайдете кілька прикладів використання display: table:

    Динамічне вертикальне вирівнювання по центру

    Натискайте на кнопку, щоб додати рядки.

    Це, мабуть, найпоширеніший спосіб використання display: table. З його допомогою можна отримати справжнє вирівнювання по вертикалі елементів з динамічної висотою.

    Є також інший, більш короткий, спосіб вертикального вирівнювання, який може вас зацікавити:

    Динамічне горизонтальне вирівнювання по центру

    Щоб горизонтально розташувати по центру динамічний елемент, можна зробити його блочно-рядковим (display: inline-block). Потім зовнішньому контейнеру цього елемента потрібно задати властивість text-align: center. Недолік цього способу полягає в «побічний ефект» вирівнювання тексту по центру. Всі дочірні елементи всередині контейнера успадкують властивість text-align: center, яке може перевизначити існуючі властивості.

    завдяки @mojtabaseyedi я знайшов новий спосіб вирівнювати динамічні елементи по горизонталі без побічних ефектів. Потрібно застосувати до динамічного елементу display: table і margin: auto.

    адаптивна верстка

    Зменшіть вікно до <480px, щоб побачити адаптивність в дії.

    Як я вже згадував, CSS-таблиця може вести себе не як таблиця, коли це необхідно. Переключивши у елемента властивість display з table-cell на block, ми зможемо розмістити елементи в стопку.

    Порядок проходження змінюється з 1-2-3 на 2-3-1

    Можна навіть змінити порядок проходження блокових елементів. Детальніше про це прийомі можна почитати тут .

    Динамічний прилипає підвал

    Відновлення підмочену репутацію CSS-таблиць Антигерой - один з центральних персонажів фільму, книги або п'єси, що не володіє звичайними героїчними якостями

    Динамічний прилипає підвал

    Прилипає підвал повинен відповідати двом вимогам:

    1. Підвал повинен прилипати до низу сторінки, коли основного контенту занадто мало, щоб заповнити всю сторінку по висоті.
    2. Підвал повинен слідувати в потоці як зазвичай, якщо обсяг контенту перевищує висоту сторінки.

    Якщо ви коли-небудь шукали рішення цього завдання, то вам, можливо, траплялися ці корисні варіанти від Chris Coyier і Ryan Fait .

    Ці рішення відмінно працюють, але у них є один недолік: підвал повинен бути фіксованою висоти. Цю проблему можна обійти засобами JavaScript, але я все ж вважаю за краще використовувати для цього CSS. За допомогою display: table можна зробити прилипає підвал з динамічної висотою.

    Розмітка «Holy Grail»

    Розмітка «Holy Grail» (від A List Apart ) - це варіант розмітки сторінки з шапкою, трьома рівними по висоті колонками (дві фіксованих бічних колонки і тягнеться центр) і прилипає підвалом.

    Розмітка «Holy Grail» (від   A List Apart   ) - це варіант розмітки сторінки з шапкою, трьома рівними по висоті колонками (дві фіксованих бічних колонки і тягнеться центр) і прилипає підвалом

    Розмітка «Holy Grail»

    Така розмітка повинна в міру можливості відповідати таким вимогам:

    1. Центральна колонка повинна тягнутися, а бічні - мати фіксовану ширину.
    2. Центральна колонка може йти першої в розмітці.
    3. Будь-яка колонка може бути більше за інших по висоті.

    Розмітка «Holy Grail» за допомогою display: table

    В наведеному вище прикладі показана розмітка «Holy Grail». Можете змінювати розміри вікна, щоб середня колонка тяглася по ширині; також можна додати контент, щоб подивитися, як працює прилипає підвал. Єдина вимога, якому ця розмітка не відповідає, - це пункт 2: «Центральна колонка може йти першої в розмітці».

    Напевно, це потрібно для пошукової оптимізації. Тобто якщо міркування SEO для вас не стоять на першому місці, за допомогою display: table ви порівняно легко зробите розмітку «Holy Grail».

    Ви шуткуєте? Flexbox все вирішить!

    Це дійсно так. Ознайомтеся, наприклад, з рішенням вищенаведених завдань за допомогою flexbox від Phillip Walton. Однак, я б не поспішав його застосовувати. На частку IE8 і IE9 досі доводиться 32% ринку десктопних браузерів - а це занадто багато користувачів, щоб відмовлятися від них заради задоволення застосувати flexbox. Якщо тільки ваш сайт не розрахований цілком на мобільний трафік - в чому я сильно сумніваюся, - варто вибрати display: table.

    Уточнення: Я працюю на консалтингову компанію, тому зацікавлений у підтримці десктопів. Але якщо вам потрібно підтримувати тільки мобільні браузери, можете сміливо використовувати flexbox.

    висновок

    Сподіваюся, з допомогою наведених прикладів мені вдалося продемонструвати корисні властивості несправедливо нехтують display: table. Однак мушу підкреслити, що CSS-таблиці - не панацея для розмітки. Використовуйте їх доречно, це дозволить вам уникнути тривалих ночей правки CSS-коду.

    Це переклад статті Коліна Тоха - « The Anti-hero of CSS Layout - "display: table" ».

    Якщо щось виглядає, працює і поводиться як таблиця, то воно має ж бути таблицею?
    Ви шуткуєте?

     

    Найди свой район!

    Восточный

    Западный

    Зеленоградский

    Северный

    Северо-Восточный

    Северо-Западный

    Центральный

    Юго-Восточный

    Юго-Западный

    Южный

    Поиск:      


     
    Rambler's Top100
    © 2007 Движение «Москва без Лужкова!»