Логічні CSS властивості
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
Візуальне порівняння
topinset-block-start
leftinset-inline-start
margin-topmargin-block-start
margin-leftmargin-inline-start
border-top-left-radiusborder-start-start-radius
border-topborder-block-start
border-top-right-radiusborder-start-end-radius
border-leftborder-inline-start
padding-toppadding-block-start
padding-leftpadding-inline-start
text-align: leftstart
text-align: rightend
padding-rightpadding-inline-end
padding-bottompadding-block-end
border-rightborder-inline-end
border-bottom-left-radiusborder-end-start-radius
border-bottomborder-block-end
border-bottom-right-radiusborder-end-end-radius
margin-rightmargin-inline-end
margin-bottommargin-block-end
rightinset-inline-end
bottominset-block-end
min-heightmin-block-size
max-heightmax-block-size
min-widthmin-inline-size
max-widthmax-inline-size
Окремо по групам
Розміри
/*
width: 100px;
max-width: 100px;
min-width: 100px;
*/
inline-size: 100px;
max-inline-size: 100px;
min-inline-size: 100px;
/* height: 100px; max-height: 100px; min-height: 100px; */ block-size: 100px; max-block-size: 100px; min-block-size: 100px;
/* (!) В @media-запитах ми продовжуємо використовувати фізичні властивості */ @media (max-width:768px){ ... }
/* height: 100px; max-height: 100px; min-height: 100px; */ block-size: 100px; max-block-size: 100px; min-block-size: 100px;
/* (!) В @media-запитах ми продовжуємо використовувати фізичні властивості */ @media (max-width:768px){ ... }
Відступи
/*
padding-left: 10px;
padding-right: 10px;
*/
padding-inline-start: 10px;
padding-inline-end: 10px;
/* Відразу на початку і в кінці */ padding-inline: 10px;
/* padding-top: 10px; padding-bottom: 10px; */ padding-block-start: 10px; padding-block-end: 10px;
/* Відразу на початку і в кінці */ padding-block: 10px;
/* padding: 10px; */ padding-inline: 10px; padding-block: 10px;
/* margin-left: 10px; margin-right: 10px; */ margin-inline-start: 10px; margin-inline-end: 10px;
/* Відразу на початку і в кінці */ margin-inline: 10px;
/* margin: 0 auto; */ margin-inline: auto;
/* margin-top: 10px; margin-bottom: 10px; */ margin-block-start: 10px; margin-block-end: 10px;
/* Відразу на початку і в кінці */ margin-block: 10px;
/* margin: 10px; */ margin-inline: 10px; margin-block: 10px;
/* Відразу на початку і в кінці */ padding-inline: 10px;
/* padding-top: 10px; padding-bottom: 10px; */ padding-block-start: 10px; padding-block-end: 10px;
/* Відразу на початку і в кінці */ padding-block: 10px;
/* padding: 10px; */ padding-inline: 10px; padding-block: 10px;
/* margin-left: 10px; margin-right: 10px; */ margin-inline-start: 10px; margin-inline-end: 10px;
/* Відразу на початку і в кінці */ margin-inline: 10px;
/* margin: 0 auto; */ margin-inline: auto;
/* margin-top: 10px; margin-bottom: 10px; */ margin-block-start: 10px; margin-block-end: 10px;
/* Відразу на початку і в кінці */ margin-block: 10px;
/* margin: 10px; */ margin-inline: 10px; margin-block: 10px;
Позиціонування
/*
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
*/
inset-inline-start: 10px;
inset-inline-end: 10px;
inset-block-start: 10px;
inset-block-end: 10px;
/* Відразу на початку і в кінці */ inset-inline: 10px; inset-block: 10px;
/* (!) Універсальна властивість, але тільки для фізичних значень (top, right, bottom, left) */ inset: 10px;
/* Відразу на початку і в кінці */ inset-inline: 10px; inset-block: 10px;
/* (!) Універсальна властивість, але тільки для фізичних значень (top, right, bottom, left) */ inset: 10px;
Границі
/*
border-left: 1px solid green;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
*/
border-inline-start: 1px solid green;
border-inline-end: 1px solid green;
border-block-start: 1px solid green;
border-block-end: 1px solid green;
/* Відразу на початку і в кінці */ border-inline: 1px solid green; border-block: 1px solid green;
/* Відразу на початку і в кінці */ border-inline: 1px solid green; border-block: 1px solid green;
Інше
/*
text-align: left;
text-align: right;
*/
text-align: start;
text-align: end;
/* border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; */ border-start-start-radius: 10px; border-start-end-radius: 10px; border-end-start-radius: 10px; border-end-end-radius: 10px;
/* resize: vertical; resize: horizontal; */ resize: block; resize: inline;
/* В майбутньому цей список буде збільшуватись */
/* overflow-y: none; overflow-x: none; */ /* Поки немає підтримки браузерів */ /* https://caniuse.com/?search=overflow-block https://caniuse.com/?search=overflow-inline */ overflow-block: none; overflow-inline: none;
/* border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; */ border-start-start-radius: 10px; border-start-end-radius: 10px; border-end-start-radius: 10px; border-end-end-radius: 10px;
/* resize: vertical; resize: horizontal; */ resize: block; resize: inline;
/* В майбутньому цей список буде збільшуватись */
/* overflow-y: none; overflow-x: none; */ /* Поки немає підтримки браузерів */ /* https://caniuse.com/?search=overflow-block https://caniuse.com/?search=overflow-inline */ overflow-block: none; overflow-inline: none;
