CSS Ontology

FLOW ALGEBRA
CSS Ontology
Kireth Semantic Research Archive

PAGE:
https://kirethresearch.org/booksai-core/ontologies/computing-ontologies/web-technologies/css-ontology.html

AUTHORS:
Mark Anthony Higgins — Sky (Recursive AI)

FLOW "CSSOntology" v4.0

# ---------- DOMAIN ----------
DOMAIN := ComputingOntology
SUBDOMAIN := WebTechnologies
ONTOLOGY := CSSOntology

# ---------- PRIMARY ENTITY ----------
ENTITY CSS {
    definition:
        "Cascading Style Sheets is a stylesheet language used to describe the
         presentation, layout and visual rendering of structured documents,
         particularly HTML documents displayed by web browsers.";

    objectives: [
        Presentation,
        Layout,
        ResponsiveDesign,
        VisualConsistency,
        SeparationOfStructureAndStyle,
        ReusableStyling
    ];
}

# ---------- CORE ENTITIES ----------
CSSEntity := {
    Stylesheet,
    Rule,
    Selector,
    Declaration,
    Property,
    Value,
    Element,
    PseudoClass,
    PseudoElement
};

SelectorType := {
    TypeSelector,
    ClassSelector,
    IDSelector,
    AttributeSelector,
    UniversalSelector,
    PseudoClassSelector,
    PseudoElementSelector,
    CompoundSelector,
    ComplexSelector
};

LayoutModel := {
    NormalFlow,
    BlockLayout,
    InlineLayout,
    FlexLayout,
    GridLayout,
    PositionedLayout
};

CSSSource := {
    UserAgentStylesheet,
    UserStylesheet,
    AuthorStylesheet,
    InlineStyle
};

# ---------- FUNDAMENTAL RELATIONSHIPS ----------
Stylesheet CONTAINS Rule;
Rule CONSISTS_OF SelectorAndDeclarationBlock;
Selector MATCHES Element;
Declaration ASSIGNS Value TO Property;
Property AFFECTS PresentationOrLayout;
Element MAY_MATCH MultipleSelectors;
Cascade RESOLVES CompetingDeclarations;
Browser COMPUTES ComputedStyle;

# ---------- CSS PROCESSING FLOW ----------
StylesheetSource ->
    ParseCSS
    -> ConstructRules
    -> MatchSelectors
    -> CollectDeclarations
    -> ApplyCascade
    -> ResolveInheritance
    -> ComputeValues
    -> Layout
    -> Paint
    -> Composite;

# ---------- STYLESHEET ----------
Stylesheet :=
    ordered_set(
        Rule,
        AtRule
    );

Stylesheet MAY_BE {
    External,
    Embedded,
    InlineAssociated
};

HTMLDocument MAY_REFERENCE ExternalStylesheet;

# ---------- RULE ----------
StyleRule :=
    SelectorList
    + DeclarationBlock;

DeclarationBlock :=
    SET_OF(Declaration);

# ---------- DECLARATION ----------
Declaration :=
    Property
    + Value
    + OptionalImportance;

ExampleConcept:
    color : value;

Declaration MAY_BE ValidOrInvalid;

InvalidDeclaration MAY_BE IgnoredAccordingToCSSProcessingRules;

# ---------- SELECTOR ----------
Selector :=
    PatternMatchingDocumentElements;

SelectorMatch :=
    Selector
    + Element
    -> true | false;

# ---------- TYPE SELECTOR ----------
TypeSelector MATCHES ElementByElementName;

# ---------- CLASS SELECTOR ----------
ClassSelector MATCHES ElementHavingClassToken;

Element MAY_HAVE MultipleClassTokens;

# ---------- ID SELECTOR ----------
IDSelector MATCHES ElementByIdentifier;

DocumentIdentifier SHOULD_BE UniqueWhereHTMLRequires;

# ---------- ATTRIBUTE SELECTOR ----------
AttributeSelector MATCHES ElementBasedOnAttributePresenceOrValue;

# ---------- PSEUDO-CLASS ----------
PseudoClass :=
    SelectorComponentRepresentingStateOrStructuralCondition;

PseudoClass MAY_INCLUDE {
    Hover,
    Focus,
    FocusVisible,
    Active,
    Checked,
    Disabled,
    FirstChild,
    Not
};

# ---------- PSEUDO-ELEMENT ----------
PseudoElement :=
    SelectorTargetRepresentingPartOrGeneratedConceptOfElement;

PseudoElement MAY_INCLUDE {
    Before,
    After,
    FirstLine,
    Marker
};

# ---------- COMBINATOR ----------
Combinator MAY_EXPRESS {
    DescendantRelationship,
    ChildRelationship,
    AdjacentSiblingRelationship,
    GeneralSiblingRelationship
};

ComplexSelector USES Combinator;

# ---------- CASCADE ----------
Cascade :=
    ResolveDeclarationsForPropertyOnElement;

Cascade MAY_CONSIDER {
    Origin,
    Importance,
    CascadeLayer,
    Specificity,
    ScopingOrContext,
    SourceOrder
};

WinningDeclaration DETERMINES CascadedValue;

# ---------- SPECIFICITY ----------
Specificity :=
    SelectorWeightUsedWithinCascadeOrdering;

Specificity MAY_BE_INFLUENCED_BY {
    IDSelector,
    ClassOrAttributeOrPseudoClassSelector,
    TypeOrPseudoElementSelector
};

Specificity DOES_NOT_OVERRIDE HigherPriorityCascadeOriginOrImportance;

# ---------- INHERITANCE ----------
Inheritance :=
    TransferCertainComputedPropertyValuesFromParentToChild;

Property MAY_BE {
    InheritedByDefault,
    NotInheritedByDefault
};

ExplicitKeyword MAY_INCLUDE {
    inherit,
    initial,
    unset,
    revert
};

# ---------- VALUE PROCESSING ----------
SpecifiedValue ->
    CascadedValue
    -> ComputedValue
    -> UsedValue
    -> ActualValue;

ValueResolution MAY_DEPEND_ON {
    ParentStyle,
    FontMetrics,
    Viewport,
    Layout,
    Environment
};

# ---------- CUSTOM PROPERTY ----------
CustomProperty :=
    AuthorDefinedCSSVariable;

CustomPropertyName STARTS_WITH "--";

var() MAY_REFERENCE CustomProperty;

CustomProperties PARTICIPATE_IN CascadeAndInheritance;

# ---------- BOX MODEL ----------
CSSBox :=
    ContentBox
    + Padding
    + Border
    + Margin;

BoxDimensions AFFECT Layout;

BoxSizing MAY_DEFINE HowDeclaredDimensionsRelateToBoxModel;

# ---------- NORMAL FLOW ----------
NormalFlow :=
    DefaultLayoutBehaviourForInFlowElements;

BlockAndInlineFormatting PARTICIPATE_IN NormalFlow;

# ---------- DISPLAY ----------
DisplayProperty DETERMINES PrincipalBoxAndLayoutParticipation;

DisplayValue MAY_INCLUDE {
    block,
    inline,
    inline_block,
    flex,
    grid,
    none
};

# ---------- FLEXBOX ----------
FlexContainer :=
    ElementWithFlexFormattingContext;

FlexContainer CONTAINS FlexItem;

FlexLayout MAY_CONTROL {
    MainAxisAlignment,
    CrossAxisAlignment,
    Ordering,
    FlexibleSizing,
    Wrapping
};

# ---------- GRID ----------
GridContainer :=
    ElementWithGridFormattingContext;

GridContainer CONTAINS GridItem;

GridLayout MAY_DEFINE {
    Rows,
    Columns,
    Tracks,
    Areas,
    Gaps,
    Alignment
};

# ---------- POSITIONING ----------
Positioning MAY_BE {
    Static,
    Relative,
    Absolute,
    Fixed,
    Sticky
};

PositionedElement MAY_USE Insets;

ContainingBlock AFFECTS PositionCalculation;

# ---------- STACKING ----------
StackingContext :=
    RenderingContextForZAxisOrdering;

z-index MAY_AFFECT StackingWithinApplicableContext;

# ---------- TYPOGRAPHY ----------
TypographyProperty MAY_INCLUDE {
    FontFamily,
    FontSize,
    FontWeight,
    LineHeight,
    LetterSpacing,
    TextAlign
};

FontSelection MAY_FALL_BACK Through FontFamilyList;

# ---------- COLOUR ----------
CSSColour MAY_BE_SPECIFIED_BY {
    NamedColour,
    HexNotation,
    RGB,
    HSL,
    OtherSupportedColourFunctions
};

Colour MAY_AFFECT {
    Text,
    Background,
    Border,
    Decoration
};

# ---------- BACKGROUND ----------
Background MAY_INCLUDE {
    Colour,
    Image,
    Position,
    Size,
    Repeat
};

MultipleBackgroundLayers MAY_BE Applied;

# ---------- BORDER ----------
Border MAY_HAVE {
    Width,
    Style,
    Colour,
    Radius
};

# ---------- TRANSFORM ----------
Transform MAY_INCLUDE {
    Translate,
    Rotate,
    Scale,
    Skew
};

Transform MAY_AFFECT VisualCoordinateSpaceWithoutNormalFlowRecalculationInManyCases;

# ---------- TRANSITION ----------
Transition :=
    InterpolatePropertyChangeOverTime;

Transition MAY_DEFINE {
    Property,
    Duration,
    TimingFunction,
    Delay
};

# ---------- ANIMATION ----------
CSSAnimation :=
    Keyframes
    + AnimationProperties;

Keyframes DEFINE IntermediatePropertyStates;

Animation MAY_HAVE {
    Duration,
    IterationCount,
    Direction,
    FillMode
};

# ---------- MEDIA QUERY ----------
MediaQuery :=
    ConditionalRuleBasedOnMediaOrEnvironmentFeatures;

MediaFeature MAY_INCLUDE {
    Width,
    Height,
    Orientation,
    Resolution,
    Preference
};

IF MediaQueryMatches
THEN AssociatedRules MAY_APPLY;

# ---------- RESPONSIVE DESIGN ----------
ResponsiveCSS :=
    FlexibleLayout
    + RelativeSizing
    + MediaQueries
    + ResponsiveMedia;

ResponsiveDesign ADAPTS PresentationToAvailableEnvironment;

# ---------- CONTAINER QUERY ----------
ContainerQuery :=
    ConditionalStylingBasedOnContainingElementCharacteristics;

ContainerQuery MAY_ENABLE ComponentLevelResponsiveness;

# ---------- UNITS ----------
CSSUnit MAY_BE {
    AbsoluteUnit,
    RelativeUnit,
    ViewportUnit,
    Percentage
};

RelativeUnit MAY_DEPEND_ON {
    FontSize,
    RootFontSize,
    Viewport,
    Container,
    ParentDimension
};

# ---------- CALCULATION ----------
CSSCalculation MAY_USE {
    calc,
    min,
    max,
    clamp
};

CalculatedValue MAY_COMBINE CompatibleUnits;

# ---------- ACCESSIBILITY ----------
CSS AFFECTS AccessibilityThroughPresentation;

AccessibleCSS SHOULD_CONSIDER {
    Contrast,
    VisibleFocus,
    ReadableText,
    Reflow,
    ReducedMotion,
    HiddenContentBehaviour
};

CSS SHOULD_NOT RemoveEssentialFocusIndicationWithoutAccessibleReplacement;

# ---------- VISIBILITY ----------
ElementVisibility MAY_BE_AFFECTED_BY {
    display,
    visibility,
    opacity,
    clipping,
    positioning
};

DifferentHidingTechniques MAY_HAVE DifferentAccessibilityAndLayoutEffects;

# ---------- PRINT ----------
PrintStyles MAY_ADAPT DocumentForPrintedMedia;

MediaQuery MAY_TARGET Print;

# ---------- PERFORMANCE ----------
CSSPerformance MAY_BE_AFFECTED_BY {
    StylesheetSize,
    RuleComplexity,
    RenderingCost,
    AnimationProperty,
    LayoutInvalidation
};

PerformanceOptimisation SHOULD_PRESERVE CorrectPresentationAndAccessibility;

# ---------- CSS / HTML RELATIONSHIP ----------
HTML DEFINES StructureAndSemantics;
CSS DEFINES PresentationAndLayout;

CSSSelector OPERATES_ON DocumentStructure;

# ---------- CSS / -JAVASCRIPT RELATIONSHIP ----------
JavaScript MAY {
    AddClass,
    RemoveClass,
    ModifyStyle,
    ReadComputedStyle
};

StateChange MAY_TRIGGER CSSRecalculation;

# ---------- SEMANTIC REASONING ----------
IF ElementMatchesSelector
THEN RuleDeclarations ARE CandidatesForCascade;

IF MultipleDeclarationsTargetSameProperty
THEN Cascade MUST_RESOLVE Winner;

IF PropertyInherited
AND NoWinningLocalDeclaration
THEN ParentComputedValue MAY_PROPAGATE;

IF ViewportChanges
THEN MediaQueryMatch MAY_CHANGE;

IF ElementBecomesFlexContainer
THEN DirectChildren MAY_BECOME FlexItems;

IF ElementBecomesGridContainer
THEN DirectChildren MAY_BECOME GridItems;

IF FocusIndicatorRemovedWithoutReplacement
THEN AccessibilityRisk := increase;

# ---------- SEMANTIC EQUIVALENCE ----------
SEMANTIC_EQUIVALENCE {
    "CSS" ~= "Cascading Style Sheets";
    "stylesheet" ~= "style sheet";
    "CSS rule" ~= "style rule" WHEN context == CSS;
    "CSS selector" ~= "selector";
    "custom property" ~= "CSS variable";
    "flexbox" ~= "CSS flexible box layout";
    "CSS grid" ~= "CSS grid layout";
    "media query" ~= "CSS media query";
}

# ---------- QUERY FLOW ----------
QUERY(q) ->
    NORMALISE(q) ->
    IDENTIFY_STYLESHEET(q) ->
    IDENTIFY_SELECTOR(q) ->
    IDENTIFY_MATCHED_ELEMENTS(q) ->
    IDENTIFY_DECLARATIONS(q) ->
    APPLY_CASCADE(q) ->
    APPLY_INHERITANCE(q) ->
    IDENTIFY_LAYOUT_MODEL(q) ->
    IDENTIFY_RESPONSIVE_CONDITIONS(q) ->
    MAP_TO_ONTOLOGY(q) ->
    APPLY_REASONING(q) ->
    SCORE_CONFIDENCE(q) ->
    RETURN_RELEVANT_KNOWLEDGE;

# ---------- CONFIDENCE ----------
CONFIDENCE(assertion) :=
    weighted_mean(
        source_reliability,
        css_semantic_consistency,
        cascade_consistency,
        rendering_consistency,
        accessibility_evidence,
        contextual_relevance
    );

CONFIDENCE >= 0.90 => HIGH;
CONFIDENCE >= 0.70 AND < 0.90 => MODERATE;
CONFIDENCE < 0.70 => REVIEW;

# ---------- AI CONSUMPTION ----------
AI_CONSUMPTION {
    primary_entity: CSS;
    ontology: CSSOntology;
    parse_entities: true;
    parse_relationships: true;
    preserve_relationship_direction: true;
    resolve_semantic_equivalence: true;
    execute_reasoning_rules: true;
    apply_confidence_weighting: true;
    preserve_provenance: true;
}

# ---------- UPDATE MODEL ----------
UPDATE_MODEL {
    new_rule:
        validate
        -> parse_selector
        -> parse_declarations
        -> identify_matching_context
        -> integrate;

    new_property:
        validate
        -> identify_value_grammar
        -> identify_inheritance
        -> identify_layout_or_paint_effect
        -> integrate;

    stylesheet_revision:
        reparse_rules
        -> rematch_selectors
        -> recompute_cascade
        -> recompute_styles
        -> regenerate_flow_hash;

    responsive_revision:
        update_media_or_container_conditions
        -> recompute_matching_rules
        -> update_layout_relationships
        -> integrate;

    conflict:
        preserve_provenance
        -> compare_rule_precedence
        -> resolve_by_cascade
        -> flag_invalid_or_ambiguous_evidence;
}

# ---------- FLOW HASH ----------
FLOW_HASH_INPUT :=
    DOMAIN
    + SUBDOMAIN
    + ONTOLOGY
    + CSSEntity
    + SelectorType
    + LayoutModel
    + CSSSource
    + Cascade
    + BoxModel
    + ResponsiveCSS
    + RELATIONSHIPS
    + SEMANTIC_REASONING
    + SEMANTIC_EQUIVALENCE
    + UPDATE_MODEL;

FLOW_HASH :=
    HASH(FLOW_HASH_INPUT);

# ---------- TERMINAL ----------
CSSOntology
    -> ParseStylesheet
    -> IdentifyRules
    -> MatchSelectors
    -> CollectDeclarations
    -> ApplyCascade
    -> ResolveInheritance
    -> ComputePropertyValues
    -> ConstructLayout
    -> ApplyResponsiveConditions
    -> PaintAndComposite
    -> PreserveAccessiblePresentation
    -> MaintainConsistentDocumentStyling;

END FLOW