Голі п'ятниці # 1

    Ð³Ð¾Ð»Ñ‹Ðµ пятницы
 
Всім доброго часу доби. Сьогодні ми поговоримо про те, як красиво оформити виділений текст, впоратися з відступами в кнопках, прокачати скролл в мобільних браузерах, схрестити колір тексту з кольором кордонів, а також розглянемо цікаві нові одиниці виміру.
 
 

Нові одиниці виміру

Не так давно до плеяди одиниць виміру CSS примкнуло нове сімейство:
 
     
  • vw (viewport width) — 1 відсоток від ширини вікна браузера;
  •  
  • vh (viewport height) — 1 відсоток від висоти вікна браузера;
  •  
  • vmin і vmax — вибирають серед vw або vh менша або більша значення.
  •  
Про ці одиницях вже писали на Хабре у бородатому 2011-му. Навіщо ж ми знову пишемо про них? Справа в тому, що вони вже цілком непогано підтримуються браузерами .
 
Навіщо вони потрібні? Вони значно спрощують верстку об'єктів, що прямо залежать від розмірів вікна. Більше ніяких відсотків від батьківських блоків, і, боронь боже, JS.
Наприклад, можна дуже зручно задавати розміри шрифту:
 
.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

 
 
Або помістити гумовий попап в центрі сторінки:
 
.blackSquare {
    background: black;
    position: fixed;
    height: 50vh;
    width: 50vw;
    left: 25vw;
    top: 25vh;
}

Погодьтеся, виглядає лаконічно.
 
 Цікавим прикладом використання нових одиниць вимірювання поділився користувач DonSinDRom . Суть його в тому, що текст практично завжди заповнює собою батьківський блок, незалежно від ширини і висоти.
 
 Протипоказання
     
  • IE 9 визнає позначення «vm» замість «vmin»;
  •  
  • iOS7 може працювати з «vh» з багами;

  •  
  • Підтримка властивості «vmax» поки недостатньо повна для використання.
  •  
 
 

Стилізація виділеного тексту

Всього парою рядків коду ми можемо змінити виділення тексту на всьому сайті:
 
*::selection {
    color: #fff;
    background: #000;
}
*::-moz-selection {    /*Только Firefox до сих пор использует префикс*/
    color: #fff;
    background: #000;
}

 
Крім кольору для тексту і фону, можна також задавати text-shadow!
 
У властивості хороша підтримка : IE9 +, всі популярні настільні браузери і навіть Android останніх версій.
 
Звичайно, такі прикрашення підійдуть не для кожного сайту, але часом вони виглядають дуже симпатично і доречно.
 
 

Відступи в кнопках Firefox

Браузер Firefox розраховує відступи в кнопках відмінними від інших браузерів методами. З якоїсь причини, він додає додаткові внутрішні відступи.
 
 Ð¾Ñ‚ступы в firefox
 
Виправити це можна таким ось хитрим способом:
 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
    padding:0;
}

 
 

Скролл в блоках на тач пристроях

Якщо у вас на сторінці є блоки з внутрішнім скролл, крім overflow: scroll / auto , обов'язково додайте до нього властивість
 
 
-webkit-overflow-scrolling: touch;

Справа в тому, що мобільні браузери часом не дуже коректно працюють з властивістю overflow: scroll, і прокрутити всю сторінку замість потрібного блоку. А якщо у браузера ще ховається адресний рядок, робота з такими блоками зовсім може перетворитися на повний хаос. І тут відчутно допомагає -webkit-overflow-scrolling : потрібний блок Скролл набагато охочіше. Це важко показати на зображенні, просто спробуйте, і відчуйте різницю)
 
 

Color + Border = Border-Color

Не всі знають, що якщо елементу задати колір тексту, він автоматично визначається і як колір межі цього елемента:
 
input[type="text"] {
    color: red;
    border: 1px solid;
}

 
 
Це може бути корисно при стилізації полів і псевдоссилок (посилань з пунктирними межами), так як у них кольору тексту і кордонів часто збігаються.
 
На сьогодні все. Сподіваємося, ви дізналися для себе щось нове! До швидких зустрічей!
  

    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.