CSS-Vergleiche | Dokumentation - Roblox Creator Hub

Die meisten CSS-Konzepte stimmen mit den Roblox-Stilkonzepten überein. Die folgenden Beispiele zeigen, wie CSS und HTML mit Luau und Roblox-Klassen/Eigenschaften übereinstimmen.

Um jedes der folgenden Luau-Skriptbeispiele zu testen:

Erstellen Sie im Explorer Folgendes:
1. StyleSheet-Instanz innerhalb von ReplicatedStorage.
2. ScreenGui-Container in StarterGui.
3. LocalScript-Instanz innerhalb des ScreenGui.
4. StyleLink-Objekt innerhalb des ScreenGui.

Fügen Sie im LocalScript den folgenden unterstützenden Code ein:

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

Fügen Sie für jedes Beispiel unten die Luau-Codezeilen nach den unterstützenden Zeilen 1–7 ein.

Selektoren

Die Selector-Eigenschaft einer StyleRule gibt an, welche Instanzen die Regel betreffen soll. Die folgenden Selektortypen stimmen von CSS zu Luau überein und können mit Kombinatoren verwendet werden.

Element

Entsprechend den CSS-Elementselektoren sind Roblox Klassenselektoren, die alle Instanzen einer bestimmten GuiObject-Klasse auswählen, z. B. Frame, ImageLabel, TextButton usw.

CSS

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

HTML

<button>Hauptmenü</button>

Luau

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

rule.Selector = "TextButton" -- Roblox-Klassenselektor
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 = "Hauptmenü"
button.Parent = screenGui

Klasse

Das Roblox-Äquivalent zu CSS class-Selektoren sind Tag-Selektoren, die Tags verwenden, die über CollectionService angewendet werden.

CSS

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

HTML

<button class="button-primary">Hauptmenü</button>

Luau

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

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

local button = Instance.new("TextButton")
button.Text = "Hauptmenü"
button.Parent = screenGui
-- Tag auf den Button anwenden
CollectionService:AddTag(button, "ButtonPrimary")

Der nächstgelegene Roblox-Vergleich zu CSS id ist der #[name]-Selektor, der nach dem Wert von Instance.Name auswählt. Im Gegensatz zur W3C-Spezifikation des id-Attributs wird nicht erwartet, dass Namen eindeutig sind.

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" -- Instanznamen-Selektor
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
-- Frame umbenennen, um dem Selektor zu entsprechen
frame.Name = "ModalFrame"

Kombinatoren

Kombinatoren ermöglichen es Ihnen, grundlegende Selektoren zu mischen, um tiefere Hierarchiebeziehungen zu erfassen.

Kind

Der Kindselektor > ist zwischen CSS und Roblox identisch.

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>Optionen</button>
</div>

Luau

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

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

-- Menücontainer erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Button erstellen
local button = Instance.new("TextButton")
button.Text = "Optionen"
-- Menücontainer als Elternteil des Buttons festlegen
button.Parent = menuContainer

Nachkomme

Im Gegensatz zur CSS-Whitespace-Syntax, zum Beispiel .menu-container button, verwendet Roblox den >>-Kombinator, um eine Nachkommenbeziehung anzuzeigen.

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>Optionen</button>
	</div>
</div>

Luau

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

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

-- Menücontainer erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Untercontainer erstellen
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Menücontainer als Elternteil des Untercontainers festlegen
subContainer.Parent = menuContainer

-- Button erstellen
local button = Instance.new("TextButton")
button.Text = "Optionen"
-- Untercontainer als Elternteil des Buttons festlegen
button.Parent = subContainer

Selektorliste

Mehrere Selektoren (einschließlich Selektoren mit Kombinatoren) können mit demselben Eigenschaftenblock deklariert werden, getrennt durch Kommas, um Redundanz zu reduzieren.

CSS

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

HTML

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

<p>Hauptmenü</p>

Luau

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

rule.Selector = "ImageLabel, TextLabel" -- Selektor für Bildbeschriftungen UND Textbeschriftungen
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

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

-- Textbeschriftung erstellen
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 = "Hauptmenü"
textLabel.Parent = screenGui

Pseudo-Klassen

Das Roblox-Äquivalent zu CSS Pseudo-Klassen Selektoren sind Zustandsselektoren, die einem der vier Enum.GuiState-Werte wie Hover oder Press entsprechen.

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" -- Zustandsselektor
rule:SetProperty("ImageTransparency", 0.5)

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

Pseudo-Instanzen

Ähnlich wie CSS Pseudo-Elemente bestimmte Teile eines Elements ändern können, kann Roblox phantomhafte UIComponents durch die Selector-Eigenschaft einer Stilregel erstellen. Zum Beispiel erstellt die folgende Regel effektiv einen UICorner-Modifier unter jedem Frame, das mit RoundedCorner20 getaggt ist, und setzt den CornerRadius jedes Modifiers auf 20 Pixel.

Luau

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

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

-- Frame erstellen
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Tag auf das Frame anwenden
CollectionService:AddTag(frame, "RoundedCorner20")

Abfragen

Roblox Stilabfragen überbrücken die Lücke zwischen CSS Medienabfragen und Containerabfragen. Mit dem @-Präfix können Sie Stile basierend auf den Abmessungen des Elternteils, den Eingabegerätetypen oder den Benutzereinstellungen zur Barrierefreiheit umschalten.

In CSS wendet @container Stile basierend auf der Größe eines Elternelements an. In Roblox definieren Sie eine Pseudo-Instanzabfrage mit ::StyleQuery, gefolgt von einem Identifikator für die Selector-Eigenschaft der Bedingung, zum Beispiel "::StyleQuery #WideContainer", zusammen mit einem StyleQuery-Bedingungsnamen wie "MinSize", um die GuiObject.AbsoluteSize des Elternteils zu bewerten. Um dann Stile auf die Instanz oder deren Kinder anzuwenden, wenn die Abfrage aktiv ist, erstellen Sie eine StyleRule mit dem @[identifier]-Präfix als Selector, zum Beispiel @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>Hauptmenü</button>
</div>

Luau

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

-- Buttonregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox-Klassenselektor
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Kind der Containerregel

-- Abfragebedingung (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Kind der Containerregel

-- Regel, die angewendet wird, wenn die Bedingung aktiv ist (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Kindselektor
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Kind der Containerregel

-- Instanzen erstellen
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Hauptmenü"
button.Parent = container

Roblox bietet auch eingebaute Abfragen, die direkt auf globale Umgebungszustände wie ViewportDisplaySize oder ReducedMotionEnabled abgebildet werden. Diese erfordern keine ::StyleQuery-Definition und können direkt mit einem @-Präfix verwendet werden.

CSS-Medienmerkmal	Roblox-Stilabfrage-Selektor
(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

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

-- Eingebaute Abfrage
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Kind der Containerregel

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

Variablen

CSS ermöglicht es Ihnen, Variablen im gesamten Stilsystem zu deklarieren und zu referenzieren. Roblox erreicht dies durch Tokens und das Instanzattribute-System. Mit $ als Präfix können Sie Attribute referenzieren, die in einer StyleRule- oder StyleSheet-Vererbungskette deklariert sind, wenn Sie Stil-Eigenschaften festlegen.

CSS

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

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

HTML

<button>Hauptmenü</button>

Luau

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

-- Stilblatt-Tokens mit Attributen festlegen
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

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

-- Button erstellen
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Hauptmenü"
button.Parent = screenGui

Übergänge

CSS Übergänge ermöglichen es Ihnen, Eigenschaftswerte über einen festgelegten Zeitraum zu tween. Sie können dies in Roblox erreichen, indem Sie Eigenschaftsübergänge auf einer StyleRule über SetPropertyTransition() (einzelne) oder SetPropertyTransitions() (mehrere) festlegen.

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>Hauptmenü</button>

Luau

-- Buttonregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox-Klassenselektor
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Übergangsverhalten für Eigenschaften festlegen
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

-- Button-Hover-Regel
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Zustandsselektor
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Textbutton erstellen
local button = Instance.new("TextButton")
button.Text = "Hauptmenü"
button.Parent = screenGui

Verschachtelung und Zusammenführung

Ein Konzept von SCSS entlehnend, können StyleRules miteinander verschachtelt werden und ihre Selektoren werden zusammengeführt.

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>Rollen</button>  
</div>

Luau

-- Menürahmenregel
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

-- Menülayoutregel
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 -- Menürahmenregel als Elternteil festlegen

-- Buttonregel
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 -- Menürahmenregel als Elternteil festlegen

-- Button-Hover-Regel
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Buttonregel als Elternteil festlegen

-- Elternrahmen erstellen
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Buttons im Rahmen erstellen
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 = "Rollen"
button3.Parent = menuFrame