CSS Vergelijkingen | Documentatie

De meeste CSS-concepten komen overeen met Roblox-stylingconcepten. De volgende voorbeelden laten zien hoe CSS en HTML zich verhouden tot Luau en Roblox-klassen/eigenschappen.

Om elk van de volgende Luau-scriptvoorbeelden te testen:

Maak in de Explorer het volgende aan:
1. StyleSheet instantie binnen ReplicatedStorage.
2. ScreenGui container in StarterGui.
3. LocalScript instantie binnen de ScreenGui.
4. StyleLink object binnen de ScreenGui.

Plak in de LocalScript de volgende ondersteunende code:

LocalScript

local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChildWhichIsA("StyleSheet")
local screenGui = script.Parent
local styleLink = screenGui:FindFirstChildWhichIsA("StyleLink")
styleLink.StyleSheet = coreSheet

Voor elk voorbeeld hieronder, plak de Luau code regels na de ondersteunende regels 1–7.

Selectors

De Selector eigenschap van een StyleRule specificeert welke instanties de regel moet beïnvloeden. De volgende selectortypes komen van CSS naar Luau en kunnen worden gebruikt met combinatoren.

Element

Equivalent aan CSS-elementselectoren zijn Roblox class selectors die alle instanties van een gegeven GuiObject klasse selecteren, bijvoorbeeld Frame, ImageLabel, TextButton, enz.

CSS

button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML

<button>Hoofdmenu</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "TextButton" -- Roblox class selector
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})

local button = Instance.new("TextButton")
button.Text = "Hoofdmenu"
button.Parent = screenGui

Class

De Roblox-equivalent van CSS class selectors zijn tag selectors die gebruik maken van tags die zijn toegepast via CollectionService.

CSS

.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML

<button class="button-primary">Hoofdmenu</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".ButtonPrimary" -- Roblox tag selector
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Hoofdmenu"
button.Parent = screenGui
-- Tag toepassen op knop
CollectionService:AddTag(button, "ButtonPrimary")

De dichtstbijzijnde Roblox vergelijking met CSS id is de #[name] selector die selecteert op basis van de waarde van Instance.Name. In tegenstelling tot de W3C-specificatie van de id-attribuut, wordt niet verwacht dat namen uniek zijn.

CSS

#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML

<div id="modal-frame"></div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "#ModalFrame" -- Instance name selector
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	BackgroundTransparency = 0.5,
	Size = UDim2.new(0.5, 0, 0, 100),
	AutomaticSize = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- Hernoem frame om overeen te komen met selector
frame.Name = "ModalFrame"

Combinators

Combinators laten je basis selectors mixen om diepere hiërarchische relaties te matchen.

Child

De child selector van > is identiek tussen CSS en Roblox.

CSS

.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML

<div class="menu-container">
	<button>Opties</button>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer > TextButton" -- Child selector
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Maak menu container
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag toepassen
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Maak knop
local button = Instance.new("TextButton")
button.Text = "Opties"
-- Stel menu container in als ouder van knop
button.Parent = menuContainer

Descendant

In tegenstelling tot de CSS-witruimtesyntaxis, bijvoorbeeld .menu-container button die hier te zien is, gebruikt Roblox de >> combinator om een afstammingsrelatie aan te geven.

CSS

.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML

<div class="menu-container">
	<div class="sub-container">
		<button>Opties</button>
	</div>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer >> TextButton" -- Descendant selector
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Maak menu container
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag toepassen
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Maak sub-container
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Stel menu container in als ouder van sub-container
subContainer.Parent = menuContainer

-- Maak knop
local button = Instance.new("TextButton")
button.Text = "Opties"
-- Stel sub-container in als ouder van knop
button.Parent = subContainer

Selector list

Meerdere selectors (inclusief selectors met combinatoren) kunnen worden gedeclareerd met hetzelfde eigenschapsblok, gescheiden door komma's, om redundantie te verminderen.

CSS

img, p {
	background-color: #FF0033;
}

HTML

<img src="gear.png" width="100" height="100">

<p>Hoofdmenu</p>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel, TextLabel" -- Selector voor afbeeldingslabels EN tekstlabels
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Maak afbeeldingslabel
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Maak tekstlabel
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "Hoofdmenu"
textLabel.Parent = screenGui

Pseudo-classes

De Roblox-equivalent van CSS pseudo-class selectors zijn state selectors die overeenkomen met een van de vier Enum.GuiState waarden zoals Hover of Press.

CSS

img:hover {
	opacity: 0.5;
}

HTML

<img src="gear.png" width="100" height="100">

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel:Hover" -- State selector
rule:SetProperty("ImageTransparency", 0.5)

-- Maak afbeeldingslabel
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

Pseudo-instances

Vergelijkbaar met hoe CSS pseudo-elements specifieke delen van een element kan wijzigen, kan Roblox fantoom UIComponents creëren via de Selector eigenschap van een stijlregel. Bijvoorbeeld, de volgende regel creëert effectief een UICorner modifier onder elke Frame getagd met RoundedCorner20 en stelt de CornerRadius van elke modifier in op 20 pixels.

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI component selector
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Maak frame
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Tag toepassen op frame
CollectionService:AddTag(frame, "RoundedCorner20")

Queries

Roblox style queries overbruggen de kloof tussen CSS media queries en container queries. Met de @ prefix kun je stijlen in- of uitschakelen op basis van de afmetingen van de ouder, typen invoerapparaten of gebruikers toegankelijkheidsinstellingen.

In CSS past @container stijlen toe op basis van de grootte van een bovenliggend element. In Roblox definieer je een pseudo-instantiequery met ::StyleQuery gevolgd door een identifier voor de Selector eigenschap van de voorwaarde, bijvoorbeeld "::StyleQuery #WideContainer", samen met een StyleQuery voorwaarde naam zoals "MinSize" om de GuiObject.AbsoluteSize van de ouder te evalueren. Vervolgens, om stijlen toe te passen op de instantie of zijn kinderen wanneer de query actief is, maak je een StyleRule met de @[identifier] prefix als zijn Selector, bijvoorbeeld @WideContainer.

CSS

.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 75%;
	height: 40px;
	border: none;
}

@container (min-width: 400px) {
	button {
		background-color: #cc0033;
	}
}

HTML

<div class="container" style="width: 80%; height: 200px;">
	<button>Hoofdmenu</button>
</div>

Luau

-- Container regel
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox class selector
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Knopregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox class selector
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Kind van containerregel

-- Query voorwaarde (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Kind van containerregel

-- Regel die wordt toegepast wanneer de voorwaarde actief is (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Child selector
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Kind van containerregel

-- Maak instanties
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Hoofdmenu"
button.Parent = container

Roblox biedt ook ingebouwde queries die direct overeenkomen met globale omgevingsstatussen zoals ViewportDisplaySize of ReducedMotionEnabled. Deze vereisen geen ::StyleQuery definitie en kunnen direct worden gebruikt met een @ prefix.

CSS Media Feature	Roblox Style Query Selector
(max-width: 600px)	@ViewportDisplaySizeSmall
(min-width: 601px) and (max-width: 1200px)	@ViewportDisplaySizeMedium
(min-width: 1201px)	@ViewportDisplaySizeLarge
(pointer: fine)	@PreferredInputKeyboardAndMouse
(pointer: coarse)	@PreferredInputTouch
(any-pointer: coarse)	@PreferredInputGamepad
(prefers-reduced-motion: reduce)	@ReducedMotionEnabledTrue
(prefers-reduced-motion: no-preference)	@ReducedMotionEnabledFalse

CSS

.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.container {
		background-color: rgba(0, 0, 34, 1);
	}
}

HTML

<div class="container" style="width: 80%; height: 200px;">

</div>

Luau

-- Container regel
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox class selector
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Ingebouwde query
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Kind van containerregel

-- Maak instanties
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Variabelen

CSS laat je variabelen declareren en refereren door het hele stijlsysteem. Roblox bereikt dit via tokens en het instance attributes systeem. Door $ als prefix te gebruiken, kun je verwijzen naar attributen die zijn gedeclareerd in een StyleRule of StyleSheet erfgoedketen bij het instellen van stijl eigenschappen.

CSS

:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML

<button>Hoofdmenu</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

-- Stel stijlblad tokens in met behulp van attributen
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- Class selector
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- Maak knop
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Hoofdmenu"
button.Parent = screenGui

Overgangen

CSS overgangen laten je eigenschapswaarden over een bepaalde duur tweenen. Je kunt dit in Roblox bereiken door eigenschapsovergangen in te stellen op een StyleRule via SetPropertyTransition() (enkele) of SetPropertyTransitions() (meerdere).

CSS

button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
	transition:
		background-color 1s ease-out,
		transform 1.25s ease-out
}
button:hover {
	background-color: #33AAFF;
	transform: rotate(-5deg);
}

HTML

<button>Hoofdmenu</button>

Luau

-- Knopregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox class selector
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Stel eigenschapsovergangs gedragingen in
buttonRule:SetPropertyTransitions({
	BackgroundColor3 = TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
	Rotation = TweenInfo.new(1.25, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
})
buttonRule.Parent = coreSheet

-- Knop hover regel
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- State selector
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Maak tekstknop
local button = Instance.new("TextButton")
button.Text = "Hoofdmenu"
button.Parent = screenGui

Nesting en samenvoegen

Een concept lenen van SCSS, StyleRules kunnen genest worden en hun selectors zullen samenvoegen.

SCSS

#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML

<div id="menu-frame">
	<button>Charms</button>
	<button>Mana</button>
	<button>Scrolls</button>  
</div>

Luau

-- Menu frame regel
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	Size = UDim2.new(0.25, 0, 0, 200),
	AutomaticSize = Enum.AutomaticSize.Y
})
menuFrameRule.Parent = coreSheet

-- Menu lay-out regel
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	FillDirection = Enum.FillDirection.Vertical,
	VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,
	HorizontalAlignment = Enum.HorizontalAlignment.Center
})
menuLayoutRule.Parent = menuFrameRule -- Stel menu frame regel in als ouder

-- Knopregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = menuFrameRule -- Stel menu frame regel in als ouder

-- Knop hover regel
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Stel knopregel in als ouder

-- Maak bovenste frame
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Maak knoppen binnen frame
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame