CSS Vergleiche | Dokumentation - Roblox Creator Hub

Die meisten CSS-Konzepte lassen sich auf Roblox-Stil-Konzepte abbilden. 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 von ScreenGui.
4. StyleLink Objekt innerhalb von 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 lassen sich von CSS auf Luau abbilden und können mit Kombinatoren verwendet werden.

Element

Entsprechend zu den CSS-Elementselektoren sind die 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-Pendant zu CSS class Selektoren sind Tagselektoren, die über CollectionService zugewiesen 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 Tagselektor
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 Button anwenden
CollectionService:AddTag(button, "ButtonPrimary")

Identifier

Der nächste Vergleich von Roblox zum CSS id ist der #[name] Selektor, der gemäß dem Wert von Instance.Name auswählt. Anders als die W3C-Spezifikation des id Attributs wird nicht erwartet, dass Namen einzigartig 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" -- Instanznamenselektor
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 zum Selektor zu passen
frame.Name = "ModalFrame"

Kombinatoren

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

Kind

Der Kindselektor > ist in 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-Leerzeichensyntax, z. B. .menu-container button wie hier gesehen, 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" -- Nachkomme 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 verringern.

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 Bild-Labels UND Text-Labels
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

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

-- Textlabel 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-Pendant 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)

-- Bildlabel 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. Beispielsweise erzeugt die folgende Regel effektiv einen UICorner Modifier unter jedem Frame, der 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-Komponentenselektor
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 Frame anwenden
CollectionService:AddTag(frame, "RoundedCorner20")

Abfragen

Roblox Stilabfragen überbrücken die Kluft zwischen CSS Medienabfragen und Containerabfragen. Mithilfe des @-Präfix können Sie Stile basierend auf den Abmessungen des Elternteils, den Eingabegerätetypen oder den Benutzerzugänglichkeitseinstellungen 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 Identifier für die Selector Eigenschaft der Bedingung, z. B. "::StyleQuery #WideContainer", zusammen mit einem StyleQuery Bedingungsnamen wie "MinSize" zur Bewertung der GuiObject.AbsoluteSize des Elternteils. 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, z. B. @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 abbilden. Diese erfordern keine ::StyleQuery Definition und können direkt mit einem @ Präfix verwendet werden.

CSS Medienfunktion	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 Token und das Instanzattribute System. Mit $ als Präfix können Sie auf Attribute verweisen, die in einer StyleRule oder StyleSheet Vererbungskette deklariert sind, wenn Sie Stil Eigenschaften setzen.

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

-- Stilisierungs-Token mit Attributen setzen
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 eine festgelegte Dauer zu tween. Sie können dies in Roblox erreichen, indem Sie übereinstimmende Übergänge in einer StyleRule über SetPropertyTransition() (einzeln) oder SetPropertyTransitions() (mehrere) festlegen.

Dieses Feature befindet sich derzeit in der Beta. Aktivieren Sie es über Datei ⟩ Beta-Funktionen ⟩ Stil-Übergänge.

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ühren

Ein Konzept aus SCSS übernehmend, können StyleRules zusammen verschachtelt werden und ihre Selektoren zusammenführen.

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
-- 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 = "Scrolls"
button3.Parent = menuFrame