|
Сообщение от laimas
|
|
возьмет на себя сервер
|
Зачем привлекать лишнее сюда, я не вижу в данном случае никаких преимуществ.
|
Сообщение от laimas
|
|
это общее не выгодно писать на каждой странице, а выгодно описать раз и подключать на каждой.
|
Обычно программа одна, она открывается, и дальше работа идёт внутри неё, представьте, например, Photoshop, который перезагружается при каждом действии. Это было бы отвратительно мерзко!
Блондинка, нужно начать с того, что определимся, как может выглядеть структура данных учебника по CSS.
Маленькое отступление. Когда в 1996 году вышла спецификация
CSS 1, то она была размером, так сказать с большую статью, и вы могли выучить CSS за день.
Но когда в 1998 году вышла
CSS 2, она была настолько большая, что в печатном виде занимала примерно 500 страниц (пачка листов, или томик), и уже тогда стало ясно, что дальнейшее развитие CSS становится слишком громоздким для одной спецификации. Так что движение вперёд означало разбиение на множество отдельных модулей, каждый с собственным номером версии. Модули, которые расширяли возможности
CSS 2.1, нумеровались как версия 3.
Вот примеры таких модулей:
Однако модули, выражающие, совершенно новые идеи, нумеруются с первой версии:
Я считаю, что учебник должен быть разбит на разделы, соответствующие модулям CSS. Например, в разделе посвященному модулю Flexible Box Layout, собрано всё про «флэксбокс».
В каждом модуле могут описываться — свойства, дескрипторы, селекторы, @-правила, значения. Это список ссылок. При нажатии на одну из них открывается пример и т.д.
Вот как выглядит заготовка для такого объекта:
var data = {
"css-background-3": {
"title": "Backgrounds and Borders Level 3",
"properties": {
"background-repeat": ["repeat", "space", "round", "no-repeat"],
"border-radius": [
"10px",
"50%",
"10px / 20px",
"2px 4px 8px 16px"
],
"box-shadow": [
"1px 1px", "0 0 black", "1px 2px 3px black",
"1px 2px 3px 4px black", "inset 1px 1px",
"1px 2px 3px 4px black inset"
]
}
},
"css-images-3": {
"title": "Image Values Level 3",
"values": {
"properties": [
"background-image",
"list-style-image",
"border-image",
"cursor",
"content"
],
"linear-gradient": [
"linear-gradient(to right, white, black)",
"linear-gradient(white 5px, black)",
"linear-gradient(white, #f06, black)"
],
"radial-gradient": [
"radial-gradient(white, black)",
"radial-gradient(circle, white, black)",
"radial-gradient(ellipse, white, black)"
]
},
"properties": {
"object-fit": ["fill", "contain", "cover", "none", "scale-down"]
}
}
};
Вам, нужно, это проделать для всех модулей со всеми свойствами, дескрипторами, селекторами, @-правилами, значениями.
Когда, у вас будет такой объект, то вы сможете легко работать с этими данными.
Строить примеры, создавать меню, совершать поиск и пр.