CSS макаласын оңдоо, толуктоо, тактоо

CSS (окулушу ⁄siːɛsɛs⁄, англисче Cascading Style Sheets «стилдердин каскаддык [көптүк] таблицалары») — белгилөө тилин колдонуу менен (көбүнчө HTML же XHTML ) жазылган документтердин (веб-барактардын) тышкы көрүнүшүн баяндоочу формалдык тил. Ошондой эле, каалаган XML документине колдонулушу мүмкүн, мисалы SVG же XUL.

Мазмуну

Сереп

CSSти колдонуу
CSSти документке кошуунун ыкмалары
CSS түзүү эрежелери

Селекторлордун түрлөрү

Универсалдуу селектор
Тег (белги) селектору
Класстардын селектору
Идентификаторлор селектору
Атрибуттар селектору
Тукумдар селектору (контексттик селектор)
Туунду элементтер селектору
Бир деңгээлдеги элементтер селектору
Псевдокласс (жалган класс) селектору
Псевдоэлемент селектору

Элементтердин класстары жана идентификаторлору
Мурастоо. Каскаддоо. CSS стилдеринин артыкчылыктары
Стилдер таблицасынын мисалы

CSS-калыптоо
Түзүү жана өнүгүү тарыхы

1-деңгээл (CSS1)
2-деңгээл (CSS2)

2-деңгээл, 1-ревизия (CSS2.1)

3-деңгээл (CSS3)
4-деңгээл (CSS4)

Браузерлердин CSSти колдоосу

Түрдүү блоктук моделдер
CSS чыпкалар
Коопсуздук

CSS Framework
CSS кеңейтүүлөрү

CSS

Кеңейтилиши.css

MIME-түрtext/css

Иштеп чыгуучуCSS Working Group

Жарыяланышы17-декабрь, 1996-жыл

Формат түрүСтилдер тили

Стандарттар1-деңгээл, 2-деңгээл, 2-деңгээл 1-ревизия,

Сайтhttps://www.w3.org/Style/CSS/

Сереп
CSSти колдонуу
CSS веб-барактарды түзүүчүлөр тарабынан түстөрдү, шрифттерди, стилдерди, өзүнчө блоктордун жайгашуусун берүү жана веб-барактардын тышкы көрүнүшүн көрсөтүүдөгү башка аспектилерде колдонулат. CSS иштеп чыгуунун негизги максаты веб-барактын логикалык түзүмүн баяндоону (HTML жана башка тилдер менен ишке ашырыла турган белгилөө тилдери) анын тышкы көрүнүшүнүн баяндалышынан бөлүү (учурда [2022] формалдык CSS тили менен ишке ашырылат). Мындай бөлүштүрүү документтин жеткиликтүүлүгүн жогорулатып, чоң ийкемдүүлүктү жана аны берилиши менен башкарууга мүмкүндүк берет, ошондой эле, документтин түзүмүндөгү татаалдыкты жана кайталануучулукту азайтат.

Андан тышкары, CSS бир эле документти түрдүү стилдерде же чыгаруу ыкмасында бере алат, мисалы, экранга берүү (түрдүү өлчөмдөгү экрандарга ылайыкташтырып), басып чыгарууга өзүнчө даярдап берүү, үн менен окуу (атайын үн браузерлери же экрандан окуу программасы аркылуу) же Брайль шрифтин колдонгон түзүлүштөргө чыгарып берүүдө.

CSSти документке кошуунун ыкмалары
CSS эрежелери, тышкы көрүнүшү баяндалуучу веб-документтин өзүндө же .css кеңейтилишине ээ болгон тышкы файларда жайгашышы мүмкүн. CSS форматы — бул CSS эрежелери жана пикирлери (комментарийлери) камтылган тексттик файл.
    CSS стилдери баяндалуучу веб-документке төрт ыкма менен кошулушу мүмкүн:

стилдердин баяндалышы өзүнчө файлда жайгашканда, документтин <head> элементинин ичине <link> элементи аркылуу кошула алат:

<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet"  type="text/css"  href="style.css">
<⁄head>
<body>
.....
<⁄body>
<⁄html>

стилдер файлы негизги документтен өзүнчө жайгашканда, документке <style> элементиндеги @import көрсөтмөсү аркылуу кошула алат:

<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
<⁄style>
<⁄head>
<⁄html>

стилдер документтин ичинде болгондо алар <head> элементинин ичине кошулуучу <style> элементи менен кошула алат:

<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
<⁄style>
<⁄head>
<body>
.....
<⁄body>
<⁄html>

стилдер документтин өзүндө баяндалганда, алар (стилдер) өзүнчө элементтин атрибуттарында жайгашышы мүмкүн:

<!DOCTYPE html>
<html>
<head>
.....
<⁄head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
<⁄p>
<⁄body>
<⁄html>

Биринчи эки учурда документке тышкы стилдер, ал эми экинчи эки учурда — ички стилдер колдонулган.

CSSти XML документине кошуу үчүн документте стилдер файлына атайын шилтеме болушу керек:

<?xml-stylesheet type="text⁄css" href="style.css"?>

CSS түзүү эрежелери
Документке CSS стилдерди кошуудагы биринчи үч учурда (өйдөдөн караңыз) файлдагы CSSтин ар бир эрежеси эки негизги бөлүккө ээ — селектор жана жарыялоолор блогу.  «{» (фигуралык кашаа) белгисинне чейинки сол жагында жайгашкан селектор документтин кайсы бөлүгүнө (балким, атайын белгиленгендер) эрежелердин жайылаарын аныктайт. Жарыялоолор блогу эреженин оң жагында жайгашат. Жарыялоолор фигуралык кашаанын ичине жайгаштырылып, өз кезегинде «;» (үтүр чекит) белгиси менен бөлүнгөн бир же бир нече жарыялоолордон турат. Ар бир жарыялоолор «:» (кош чекит) белгиси менен бөлүнгөн CSS касиетинин (функциясынын) жана анын маанисинин айкалышынан турат. Селекторлор бир сапта үтүр аркылуу топтолушу мүмкүн. Бул учурда, касиет алардын ар бирине колдонулат.

селектор, селектор {
касиет: маани;
касиет: маани;
касиет: маани;
}

Документке CSSти кошуудагы CSS эрежелеринин төртүнчү учурунда ага колдонуучу style элементинин атрибут маанилери «;» белгиси менен бөлүнгөн жарыялоолордун тизмесин билдирет («CSS касиети : мааниси» — бул бир жарыялоо, ушундай жарылоолордун үтүр чекит аркылуу бөлүнөт деген сөз).

Селекторлордун түрлөрү
Универсалдуу селектор

* {
margin: 0;
padding: 0;
}

Тег (белги) селектору

p {
font-family: arial, helvetica, sans-serif;
}

Класстардын селектору

.note {
color: red;
background-color: yellow;
font-weight: bold;
}

Идентификаторлор селектору

#paragraph1 {
margin: 0;
}

Атрибуттар селектору

a[href="https:⁄⁄tyup.net"] {
font-weight: bold;
}

Тукумдар селектору (контексттик селектор)

div#paragraph1 p.note {
color: blue;
}

Туунду элементтер селектору

p.note > b {
color:green;
}

Бир деңгээлдеги элементтер селектору

h1 + p {
font-size:24px;
}

Псевдокласс (жалган класс) селектору

a:active {
color: blue;
}

Псевдоэлемент селектору

p::first-letter {
font-size: 32px;
}

Элементтердин класстары жана идентификаторлору

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text⁄html; charset=utf-8">
<title>
Класстар жана идентификаторлор селекорлору
<⁄title>
<style>
p.big {
font-family: arial, helvetica, sans-serif;
color: red;
}

div#first {
background-color: silver;
}
<⁄style>
<⁄head>
<body>
<div id="first">

<⁄div>
<p class="big">

<⁄p>
<⁄body>
<⁄html>

Элемент класстары жана элемент идентификаторлорунун негизги айырмачылыктары кийинкидей: идентификатор бир элементке арналган, класс болсо дароо бир нече элементке бериле алат. Ошондой болсо да, заманбап браузерлер, шартка ылайык, бирдей идентификаторлого ээ болгон элементтерди туура көрсөтө берет. Дагы бир айырмачылыгы, класстардын көптүк түрдө болуу мүмкүндүгүндө, мисалы, элемент классы боштук аркылуу бөлүнгөн бир нече сөздөрдөн турганда. Идентификаторлор үчүн бул мүмкүн эмес.

Идентификатордун класстан кийинкидей айырмасын белгилөө маанилүү: документте уникалдуу элементти табуу үчүн идентификаторлор JavaScript тилинде кеңири колдонулат.

Класстардын жана идентификаторлордун аттары, тег жана алардын атрибуттарынан айырмаланып тамга регистрына (чоң жана кичине тамгаларга) сезимталдуу.

Класстардын жана идентификаторлордун касиеттери ага ылайык селекторлордун жардамы менен берилет. Ошону менен бирге, жалпы класс касиети катары берилиши мүмкүн (мындай учурда селектор «.» [чекиттен] башталат, мисалы, «.big») же идентификатор касиети өзүнө-өзү берилиши мүмкүн (мындай учурда селектор «#» [торчо] белгисинен башталат, мисалы, «#first»), ошондой эле, ошол класстын кайсы бир элементинин касиети катары же ошол идентификатору менен берилет.

CSSте веб-барак автору тарабынан берилүүчү класстардан тышкары, айтылуу псевдокласстардын чектелген топтому бар, булар, гипершилтемерлердин киргизүү фокусунун белгилүү бир абалда турган көрүнүшүн, ошондой эле, башка элементтердин биринчи туунду элементи болгон элементтердин көрүнүшүн баяндайт. Андан тышкары, CSS-те айтылуу төрт псевдоэлемент бар: биринчи тамга, биринчи сап, элементке чейин жана кийин атайын стилдерди колдонуу.

Мурастоо. Каскаддоо. CSS стилдеринин артыкчылыктары
HTML документтерине CSSти колдонуу, мурастоо жана каскаддоодо негизделген. Мурастоо негизи аталык-элементтерге жарыяланган CSS касиеттери дээрлик дайыма тукум-элементтер тарабынан мурасталат.

Каскаддоо негизи кайсы бир HTML элементине бир убакта ылайыктуулугуна бирден көп болгон CSS эрежеси коюлган учурда колдонулат, башкача айтканда ошол эрежелердин маанилеринин конфликтиси пайда болгондо. Мындай конфликттерди чечүү үчүн артыкчылык эрежелери киргизилет.

Браузердин стили эң төмөнкү артыкчылыкка ээ;
Маанилүүлүгү боюнча кийинки артыкчылык бул браузердин тууралоолорунда колдонуу тарабынан коюлган артыкчылыктар;
Барактын автору тарабынан берилген артыкчылык эң жогорку артыкчылыкка ээ. Андан ары, бул автордук стилде артыкчылыктар кийинкидей коюлат:

Документтеги өзүнүн ата-тегинен стилдерди мурастаган элемент эң төмөнкү артыкчылыккан ээ;
Андан жогорураак артыкчылыкка документке кошулган тышкы стилдер таблицаларында берилген стилдер ээ;
Кийинки деңгээлдеги артыкчылыкка документтеги style контейнерлериндеги бардык он түрдөгү селекторлор тарабынан түздөн-түз берилген стилдер ээ. Кайсы бир элементке бир нече селекторлор таандык болуп, анын көрүнүшүн берген учурлар сейрек эмес. Булардын ортосундагы мындай конфликттер ар бир мындай селектордун спецификалуулугун эсептөө жана ал селекторлорду берилген элементке алардын спецификалуулугунун азаюуу иретинде колдонуу менен чечилет. Спецификалуулугун эсептөө төмөндө берилет.

Селекторлордун спецификалуулугу 4 топко бөлүнөт — a, b, c, d:

эгер стиль камтылган болсо (style="..." аныкталган болсо анда а=1, антпесе a=0);
«b» мааниси селектордогу идентификаторлордун санына барабар (антпесе — id=" ", алар # белгисинен башталат);
«c» мааниси класстардын (class=" ", булар «.» башталат),  псевдокласстардын (булар «:» башталат, мисалы, a:hover) жана атрибуттар селекторлорунун (input[type="text") санына барабар;
«d» мааниси элемент түрлөрүнүн (h1 { color: blue; }) жана псевдокод-элементтер (p::first-line { color: blue; }) селекторлорунун санына барабар. Ушундан кийин, алынган маани санга келтирилет (негизинен ондук эсептөө системасында). Спецификалуулугу чоң мааниге ээ болгон селектор, чоң артыкчылыкка ээ.

Спецификалуулукту эсептөө таблицасы:

Селектор
a, b, c, d
Сан

span
0, 0, 0, 1
1

div .class
0, 0, 1, 1
11

#id .class
0, 1, 1, 0
110

div span
0, 0, 0, 2
2

.class
0, 0, 1, 0
10

#id span
0, 1, 0, 1
101

Бирок, барактын автору же колдонуучу тарабынан «!important» коштомо эрежесинин жардамы менен жарыяланган стилдер эң жогорку арчыкчылыкка ээ. Эгер мындай касиеттерден бир нече болсо, биринчи кезекте автор же колдонуучу берген стилдерге артыкчылык берилет, ал эми калган автор тарабынан берилүүчү касиеттерге өйдөдө айтылган спецификалуулук негиздери боюнча аныктоо жана бул касиеттерди спецификалуулуктарынын кемүү иретинде колдонуу талап кылынат.

Стилдер таблицасынын мисалы
Стилдер таблицасынын мисалы (кийинкидей түрдө өзүнчө .css файлында жайгаштырылышы мүмкүн же <style> тегтери менен курчалып, ошол эле веб-барактын «башында» жайгаштырууга болот):

p {
font-family: arial, helvetica, sans-serif;
}
h2 {
font-size: 20pt;
color: red;
background: white;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
p#paragraph1 {
padding-left: 10px;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
[type="button"] {
background-color: green;
}

Бул жерде p, h2, .note, p#paragraph1, a:hover, #news p жана [type="button"] болгон селекторлору бар CSSтин жети эрежеси берилген. Өйдөдө жазылган кодго төмөндө баяндама берилет, бул дайыма ушундай болот дегенди билдирбейт, автор кандай код жазса ошондой болот.

Биринчи эрежеде p (абзац), HTML элементине ыйгарылган — стиль дайындалган. Абзацтар Arial арибинде же, эгер андай шрифт жеткиликсиз болсо, анда Helvetica же Sans-serif шрифттери, антпесе, ушул бүлөдөгү башка шрифтинде чыгарылат.
Экинчи эреже h2 HTML элементине ыйгарылган (h2 — экинчи деңгээлдеги аталыш белгиси). Экинчи деңгээлдеги аталыш чоңураак өлчөмдө, ак фондо кызыл түстө көрсөтүлөт.
Үчүнчү эреже «class» атрибуту «note» барабар болгон каалаган элементке колдонулат. Мисалы, <p class="note"> параграфына. Бул абзац жарым кара кызыл түстөгү шрифтте, сары фондо чыгарылат <⁄p>
Төртүнчү эреже id атрибуту paragraph1 барабар болгон p элементине гана колдонулат. Мындай элементтин ички кемтиги 10 пикселге (padding) барабар.
Бешинчи эреже a элементтерине болгон hover стилин аныктайт. Демейде, бул касиеттин (a касиети) көпчүлүк браузерлерде a элементинин текстинде асты сызылган болот. Бул эреже компьютер чычканынын көрсөткүчү ушул элементти үстүндө турганда астын сызуусун жоготот.
Алтынчы эреже кайсы бир элементтин ичиндеги id атрибуту «news» барабар болгон p элементтерине колдонулат (#news p — бул тукум [туунду] селекторунун типтүү учуру).
Жетинчи эреже type атрибуту button барабар болгон бардык элементтерге колдонулат. Мисалы, бул эреже <input type="button"> элементине пайдаланылат же <button type="button">Баскыч<⁄button> (кадимки баскыч) фонунун түсүн жашылга өзгөртүү менен.

CSS-калыптоо
CSSтин пайда болушуна чейин веб-барактарды көркөмдөө бир гана HTMLдин каражаттары менен түздөн-түз документтин ичинде ишке ашырылган. Бирок, CSSтин пайда болушу менен документтин мазмунун жана берилишин түп-тамырынан ажыратууга мүмкүн болду. Жаңы киргизүүнүн эсебинен окшош документтердин массасына бирдиктүү көркөмдөө стилин оңой пайдалануу, ошондой эле, бул көркөмдөөнү тез өзгөртүү мүмкүндүгү келди.

Артыкчылыктары:

Ар кандай көрүү (маалыматты алуу) түзүлүштөрү үчүн барактардын бир нече дизайны.  Мисалы, экранда дизайн чоң жазылыкта эсептелип, кагазга басып чыгарууда меню сыяктуу бөлүктөр чыгарылбайт, ал эми чөнтөк персоналдык компьютерлерде жана уюлдук телефондо меню бөлүгү мазмунунун артынан ээрчип жүрөт.
Маалыматтарды берүү эрежелерин өзүнчө CSS файлга өткөрүү менен сайт баракчасынын жүктөлүү убакытын азайтуу. Мындай учурда браузер баракчада сакталган документтин түзүмүн, маалыматын гана жүктөйт, ал эми бул маалыматтарды берүү эрежелери браузер тарабынан бир гана жолу жүктөлүп кэшге сакталышы мүмкүн.
Кийин дизайнды өзгөртүүнүн жеңилдиги. Ар бир баракты өзгөртүүнүн кереги жок, CSS файлды өзгөртүү жетиштүү.
Көркөмдөөнүн кошумча мүмкүнчүлүктөрү. Мисалы, CSS-калыптоонун (орусча CSS-вёрстка) жардамы менен калган текстти айланып өтө турган текст блогун жасаса болот (мисалы меню үчүн) же баракчаны өйдө⁄ылдый жылдырууда меню дайыма көрүнүп тургандай кылып.

Кемчиликтер:

Калыптоонун түрдүү браузерлерде түрдүү көрсөтүлүшү, өзгөчө эскилеринде, алар бир эле CSS маалыматты ар кандай интерпретациялайт.
Тажрыйбада көп учурда бир гана CSS файлын эмес, татаал жана даана эмес ыкмада CSS селекторлор менен байланышкан HTML белгилерди (тег) да өзгөртүүгө туура келет, а бул бирдиктүү стилдер файл түшүнүгүн жокко чыгарып, өзгөртүү жана текшерүү убактысын кыйла көйбөйтөт.

Түзүү жана өнүгүү тарыхы
CSS — W3C консорциуму тарабынан жактырылган жана «Web стандарттары» жалпы аталышын алган кеңири спектрдагы технологиялардын бири. 1990-жылдары программисттер жана веб-дизайнерлер өзүлөрүнүн сайттарын долборлоого мүмкүндүк жаратуу үчүн Web тармагын стандартташтыруу, кандайдыр бир бирдиктүү эрежелерди түзүү зарылдыгы айкын болгон. Ошентип, HTML 4.01 жана XHTML тилдери, ошондой эле, CSS стандарты пайда болгон.

1990-жылдардын башында ар кандай браузерлер веб-барактарды көрсөтүүнүн жеке стилдери болгон. HTML өтө тез өнүгүп, ошол убактагы маалыматты көркөмдөө боюнча талаптарды канааттандырууга кубаты жеткен, ошондуктан, CSS анча кеңири таанылган эмес.

«Стилдердин каскаддык таблицалары» (Cascading Style Sheets) термини 1994-жылы Хокон Ли сунушталган. Ал Берт Бос менен биргеликте CSSти өнүктүрө баштаган.

Ошол убактагы стилдер тилинен айырмаланып CSS негизгисинен тукумуна мурастоону колдонгон, ошондуктан иштеп чыгуучу мурда аныкталган стилдерге таянып ар кандай стилдерди аныктай алат.

1990-жылдары Дүйнөлүк Желе Консорциуму (W3C) CSSке кызыгуусун көрсөтүп, 1996-жылдын декабрында CSS1 сунуштамасы чыккан.

1-деңгээл (CSS1)
W3C сунуштамасы, 1996-жылдын 17-декабрында кабыл алынып, 1999-жылдын 11-январында оңдолгон. Бул сунуштама берүүчү мүмкүндүктөрдүн арасында:

Шрифттердин параметрлери. Гарнитураны берүү жана шрифт өлмөчү боюнча мүмкүндүктөр, ошондой эле, анын стили — кадимки, курсив же жарым кара.
Түстөр. Спецификация барактагы тексттин, фондун, рамкалардын жана башка элементтердин түсүн аныктоого мүмкүндүк берет.
Текст атрибуттары. Символ аралык интервал, сөздөр ортосундагы алыстык жана саптын бийиктигин (башкача айтканда сап аралык кемтиктер) көрсөтүү мүмкүндүктөрү.
Текст, сүрөттөр, таблицалар жана башка элементтер үчүн түздөө (тегиздөө).
Бийиктиги, жазылыгы, ички (padding) жана тышкы (margin) кемтиктер жана рамкалар сыяктуу блоктордун касиеттери. Ошондой эле, спецификацияга float жана clear сыяктуу элементтерди позициялоо боюнча чектелген каражаттар кирген.

2-деңгээл (CSS2)
W3C сунуштамасы 1998-жылдын 12-майында кабыл алынган. Бир нече өзгөчөлүктөрдөгү тескери айкалышууну сактап, CSS1де негизделген. Функционалдуулугуна кошулуулар:

Блоктук калыптоо (вёрстка). Салыштырмалуу, абсолюттук жана туруктуу позициялоо пайда болгон. Элементтерди баракка жайгаштырууда таблицалык калыптоосуз ишке ашыра алат.
Алып жүрүүчүлөр түрлөрү. Түрдүү алып жүрүүчүлөр үчүн түрдүү стилдерди орното алат (мисалы, монитор, принтер, чөнтөк ПК).
Үн стилдеринин таблицалары. Үн алып жүрүүчүлөр үчүн үндү, анын бийиктигин аныктайт (мисалы, сайттын көзү көрбөгөн колдонуучулары үчүн)
Барактык алып жүрүүчүлөр. Баракты кагазга басып чыгарууда анын так жана жуп сандарындагы барактарына ар кандай стилдерди орното алат.
Селекторлордун кеңейтилген механизми.
Көрсөткүчтөр.
Генерациялануучу мазмун. Алгачкы документте жок мазмунду керектүү элементке чейин же кийин кошуу мүмкүндүгү.

Учурда (2022) W3C CSS2ни колдоосун токтотуп, анын ордуна CSS2.1 колдонууну сунуштайт. Албетте булардын экөө тең эскирген, бирок кээ бир учурларда эскилери зарыл болуп калышы ыктымал.

2-деңгээл, 1-ревизия (CSS2.1)
W3C сунуштамасы, 2011-жылдын 7-июнунда кабыл алынган.

CSS2.1 CSS2ге негизделген. Мурдагы версиясындагы каталарды оңдоодон тышкары, жаңы ревизияда спецификациялардын кээ бир бөлүктөрү өзгөртүлгөн, ал эми кээ бирлери таптакыр алынган. Алынган бөлүктөр келечекте CSS3кө кошулушу мүмкүн.

3-деңгээл (CSS3)
CSS3 (англисче Cascading Style Sheets 3 — үчүнчү муундагы каскаддык таблицалардын стилдери) — CSSтин автивдүү иштелип чыгып жаткан (2022) спецификациясы. Белгилөө тилинин жардамы менен ишке ашырылган формалдык тилди билдирет. CSS1, CSS2 жана CSS2.1ге салыштырмалуу эң масштабдуу редакциясы. CSS3түн негизги өзгөчөлүгү анын JavaScript колдонбостон анимацияланган элементтерди түзө алуусу, сызыктуу жана радиалдык градиенттерди, көлөкөлөрдү, жылмалоо ж. б. колдоосу.

Көбүнчө HTML жана XHTML белгилөө тилинде жазылган веб-барактарды баяндоо жана тышкы көрүнүшүн көркөмдөө каражаты катары пайдаланылат, бирок, каалаган XML документтерине да колдонула алат, мисалы, SVG же XUL.

Муруңку версияларына караганда спецификация модулдарга бөлүнгөн, алардын иштеп чыгуусу жана өнүгүүсү көз карандысыз ыкмада жүрөт. CSS3 CSS2.1ге негизделип, учурдагы касиеттерди жана маанилерди толуктап, жаңыларын кошот: блоктордун тоголоктолгон бурчтары, трансформация, балким өзгөрмөлөрдү киргизүү.

4-деңгээл (CSS4)
W3C тарабынан 2011-жылдын 29-сентябрынан бери иштелип чыгууда. CSS4 модулдары CSS3 негизинде түзүлүп, жаңы касиеттер жана маанилер менен толукталууда. Булардын баары азырынча жөнөкөй жазма түрүндө гана (working draft).

Мисалы:

CSS Cascading and Inheritance Level 4
Selectors Level 4
CSS Image Values and Replaced Content Module Level 4
CSS Backgrounds and Borders Module Level 4
CSS Color Module Level 4
Media Queries Level 4
CSS Pseudo-Elements Module Level 4
CSS Text Module Level 4

Браузерлердин CSSти колдоосу
CSS стандартын толугураак колдогон браузерлер: Gecko (Mozilla Firefox ж. б.), Webkit (Safari, Arora, Google Chrome) жана Presto (Opera) кыймылдаткычындагы браузерлер.

Мурдагы эң популярдуу браузер Internet Explorer 6 CSSти жарым-жартылай гана колдойт.

Internet Explorer 7 CSSти колдоосун кыйла жакшырткан, бирок дагы деле көптөгөн каталар менен иштеген.

Internet Explorer 8 толугу менен CSS 2.1ди жана жарым-жартылай CSS3тү колдогон жаңы кыймылдаткычты пайдаланат.

Веб-стандарттардын браузер тарабынан колдоосун текшерүү үчүн Acid тести иштелип чыккан, анын ичинде CSS стандартынын түрдүү бөлүктөрү.

Түрдүү блоктук моделдер
W3C консорциумунун CSS стандарттарында width касиети блок мазмунунун кемтиктерин жана рамкаларын камтыбастан жазылыгын аныктаган модел колдонулат. Internet Explorer браузеринин эрте версиялары (4 жана 5) жеке моделин ишке ашырып, мында width блоктун рамкаларынын ортосундагы аралыкты аныктайт, анын ичинде кемтиктер (padding) жана рамкалар (border) дагы эске алынат. Internet Explorer 5тен тышкары, бул моделди Netscape 4 жана Opera 7 браузерлери да түшүнүшөт. W3C стандарттык моделин колдоо, IE 6-версиясында гана пайда болгон.

CSS3түн иштелип чыгуучу стандартында бул көйгөйдү чечүү үчүн W3C стандарттык моделинде колдонууга көрсөтүлгөн content-box мааниси менен box-sizing касиети киргизилген, IE 5 моделинде колдонуу үчүн border-box мааниси.

Mozilla браузеринде бул касиетти -moz-box-sizing жеке иштиктүү аталышында дагы бир padding-box маанисин киргизген, ошентип үчүнчү блоктук модел түзүлгөн, мында width — рамкаларды эске албастан блоктун мазмунунун жана кемтиктеринин өлчөмү.

CSS чыпкалар
CSSти ар кандай браузерлер тарабынан ишке ашыруу айырмачылыктары, веб иштеп чыгуучуларды «кантип бардык браузерлерде баракты бирдей көрсөтүү керек?» деген суроого чечим издөөгө мажбур кылат. Мында, CSS чыпкалар (CSS-хактар) түрдүү элементтерге стилдерди тандап колдонууга мүмкүндүк берет. Мисалы, Internet Explorer 6, «* html селектор» («star html bug» атында белгилүү болгон чыпка) түрүндөгү селекторлорду колдонгон эрежелерди пайдаланат. Quirks mode-до иштеген W3C жана IE блоктук модели, жазылыгы 100 пиксель жана ички кемтиктери 10 пиксель болгон #someblock блогун көрсөтүү үчүн кийинкидей код жазса болот:

⁄* W3C модели - мазмун жазылыгы 80px жана ар бир жагынан кемтиктер 10px *⁄
#someblock { width: 80px; padding: 10px; }

⁄* Кийинки эреже IE6 гана колдонот. *⁄
* html #someblock { width: 100px; padding: 10px; }

Internet Explorer үчүн эрежелерди тандалма колдонуунун дагы бир ыкмасы: шарттуу пикирлер (комментарийлер).

Коопсуздук
2010-жылы колдоо алдында болгон Internet Explorer-дин бардык версиялары кооптуу болгон: браузер тарабынан каскаддык стилдерди (CSS) иштетүүдө алгач мааниленбеген (инициализацияланбаган) эс пайда болуп, анын аркасынан колдонуучунун компьютеринде аралыктан зыяндуу кодду иштетүү мүмкүндүгү бар эле.

CSS Framework
CSS Framework (ошондой эле, Web design framework) — бул калыптоочунун (верстальщик) жумушун жөнөкөйлөтүү, иштеп чыгууну тездетүү жана ката кетирүүнү болтурбоо (ар кандай браузерлердин айкалышуу көйгөйлөрү ж. б.) үчүн алдын-ала даярдалган CSS-библиотека, мисалы, Bootstrap. Скрипттик программалоо тилинин библиотекалары сыяктуу эле CSS-фреймворктор .css түрүндөгү файлдар менен долбоорго кошулуп (веб-барактын башына коюлат), калыптоону анча жакшы билбеген программит же дизайнерге туура html макет түзүүгө мүмкүндүк берет.

CSS кеңейтүүлөрү
Барактарды калыптоодо көп учурда бир эле маанини көп жолу пайдаланууга туура келет: бир эле түстөр, шрифттер ж. б. Эгер бул маанини өзгөртүү керек болсо, көп жерлерди өзгөртүш керек болот.

Бул маселелерди чечүү жана иштеп чыгууну тездетүү үчүн CSS тилинин бир нече кеңейтүүлөрү (препроцессорлору) бар. Кеңейтүү деген сөз, CSS кеңейтүү үчүн коду туура дегенди билдирет, тескери эмес. «Кеңейтилген CSS» кодунан жөнөкөй, браузерлер тарабынан кабыл алынуучу CSS файлды алуу үчүн компиляция жасоо зарыл. Компиляция бир нече түрлөрдө болушу мүмкүн:

колдонуучу тарапта баракты иштетүүдө (JavaScript каражаттары менен)
баракты иштетүүдө сервер тарапта
сайтты калыптоо учурунда атайын компилятор каражаттары менен

CSS кеңейтүүлөрүнүн (препроцессорлорунун) мисалдары:

Sass
LESS
Stylus
Кээ бир PostCSS кеңейтүүлөрүнүн тилдери