Porównania CSS | Dokumentacja – Centrum twórców Roblox

Większość koncepcji CSS odpowiada koncepcjom stylizacji w Robloxie. Następujące przykłady pokazują, jak CSS i HTML są zgodne z klasami/właściwościami Luau i Roblox.

Aby przetestować każdy z poniższych przykładów skryptu Luau:

W Eksplorerze utwórz następujące elementy:
1. instancję StyleSheet wewnątrz ReplicatedStorage.
2. kontener ScreenGui w StarterGui.
3. instancję LocalScript wewnątrz ScreenGui.
4. obiekt StyleLink wewnątrz ScreenGui.

W LocalScript wklej następujący kod pomocniczy:

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

Dla każdego z poniższych przykładów wklej linie kodu Luau po liniach pomocniczych 1–7.

Selekcje

Właściwość Selector reguły StyleRule określa, które instancje reguła powinna dotyczyć. Następujące typy selektorów odpowiadają CSS w Luau i mogą być używane z kombinatorami.

Element

Odpowiednik selektorów elementów CSS to selekcje klas w Robloxie, które wybierają wszystkie instancje danej klasy GuiObject, np. Frame, ImageLabel, TextButton itd.

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

HTML
<button>Menu główne</button>

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

rule.Selector = "TextButton" -- Selekcja klasy Roblox
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 = "Menu główne"
button.Parent = screenGui

Klasa

Odpowiednikiem selektorów CSS class w Robloxie są selekcje tagów, które wykorzystują tagi stosowane za pomocą CollectionService.

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

HTML
<button class="button-primary">Menu główne</button>

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

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

local button = Instance.new("TextButton")
button.Text = "Menu główne"
button.Parent = screenGui
-- Zastosuj tag do przycisku
CollectionService:AddTag(button, "ButtonPrimary")

Identyfikator

Najbliższe porównanie w Robloxie do CSS id to selektor #[name], który wybiera zgodnie z wartością Instance.Name. W przeciwieństwie do specyfikacji W3C atrybut id, nazwy nie muszą być unikalne.

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" -- Selekcja nazwy instancji
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
-- Zmień nazwę ramki, aby pasowała do selektora
frame.Name = "ModalFrame"

Kombinatory

Kombinatory pozwalają ci łączyć podstawowe selekcje, aby dopasować głębsze relacje hierarchiczne.

Dziecko

Selektor dziecka > jest identyczny między CSS a 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>Opcje</button>
</div>

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

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

-- Utwórz kontener menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Zastosuj tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Utwórz przycisk
local button = Instance.new("TextButton")
button.Text = "Opcje"
-- Ustaw kontener menu jako rodzica przycisku
button.Parent = menuContainer

Potomek

W przeciwieństwie do składni odstępów CSS, np. .menu-container button, Roblox używa kombinatora >>, aby wskazać relację potomka.

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

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

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

-- Utwórz kontener menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Zastosuj tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Utwórz podkontener
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Ustaw kontener menu jako rodzica podkonter
subContainer.Parent = menuContainer

-- Utwórz przycisk
local button = Instance.new("TextButton")
button.Text = "Opcje"
-- Ustaw podkontener jako rodzica przycisku
button.Parent = subContainer

Lista selektorów

Wiele selektorów (w tym selektory z kombinatorami) można zadeklarować z tym samym blokiem właściwości, oddzielonym przecinkami, aby zredukować redundancję.

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

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

<p>Menu główne</p>

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

rule.Selector = "ImageLabel, TextLabel" -- Selektor dla etykiet obrazów I etykiet tekstowych
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Utwórz etykietę obrazu
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Utwórz etykietę tekstową
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 = "Menu główne"
textLabel.Parent = screenGui

Pseudo-klasy

Odpowiednikiem selektorów pseudo-klas w Robloxie są selekcje stanów, które odpowiadają jednej z czterech wartości Enum.GuiState, takich jak Hover lub 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" -- Selektor stanu
rule:SetProperty("ImageTransparency", 0.5)

-- Utwórz etykietę obrazu
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

Podobnie jak w przypadku CSS pseudo-elementów, które mogą modyfikować konkretne części elementu, Roblox może tworzyć fantomowe UIComponents dzięki właściwości Selector reguły stylu. Na przykład, następująca reguła skutecznie tworzy modyfikator UICorner dla każdej Frame opatrzonej tagiem RoundedCorner20 i ustawia promień każdego modyfikatora CornerRadius na 20 pikseli.

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

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

-- Utwórz ramkę
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Zastosuj tag do ramki
CollectionService:AddTag(frame, "RoundedCorner20")

Zapytania

Zapytania stylu Roblox style queries łączą przepaść między zapytaniami CSS media queries i zapytaniami kontenerów. Używając prefiksu @, możesz włączać style na podstawie wymiarów rodzica, typów urządzeń wejściowych lub ustawień dostępności użytkownika.

W CSS @container stosuje style w zależności od rozmiaru elementu nadrzędnego. W Robloxie definiujesz zapytanie pseudo-instancji, używając ::StyleQuery, a następnie identyfikatora, dla właściwości Selector warunku, na przykład "::StyleQuery #WideContainer", razem z nazwą warunku StyleQuery, taką jak "MinSize", aby ocenić GuiObject.AbsoluteSize rodzica. Następnie, aby zastosować style do instancji lub jej dzieci, gdy zapytanie jest aktywne, tworzysz StyleRule z prefiksem @[identifier] jako Selector, na przykład @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>Menu główne</button>
</div>

Luau
-- Reguła kontenera
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Selekcja klasy Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Reguła przycisku
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selekcja klasy Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Dziecko reguły kontenera

-- Warunek zapytania (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Dziecko reguły kontenera

-- Reguła, która jest stosowana, gdy warunek jest aktywny (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Selektor dziecka
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Dziecko reguły kontenera

-- Utwórz instancje
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Menu główne"
button.Parent = container

Roblox zapewnia również wbudowane zapytania, które odpowiadają globalnym stanom środowiska, takim jak ViewportDisplaySize lub ReducedMotionEnabled. Nie wymagają one definicji ::StyleQuery i mogą być używane bezpośrednio z prefiksem @.

Cecha mediów CSS	Selekcja Zapytania Stylu Roblox
(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
-- Reguła kontenera
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Selekcja klasy Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Wbudowane zapytanie
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Dziecko reguły kontenera

-- Utwórz instancje
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Zmienne

CSS pozwala na deklarowanie i odniesienia do zmiennych w całym systemie stylów. Roblox osiąga to poprzez tokeny i system atrybutów instancji. Używając $ jako prefiksu, możesz odwoływać się do atrybutów zadeklarowanych w łańcuchu dziedziczenia StyleRule lub StyleSheet podczas ustawiania właściwości stylu.

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

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

HTML
<button>Menu główne</button>

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

-- Ustaw tokeny stylu za pomocą atrybutów
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

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

-- Utwórz przycisk
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Menu główne"
button.Parent = screenGui

Przejścia

CSS przejścia pozwalają na tweenowanie wartości właściwości przez ustaloną ilość czasu. Możesz to osiągnąć w Robloxie, ustawiając przejścia właściwości w StyleRule poprzez SetPropertyTransition() (pojedyncze) lub SetPropertyTransitions() (wielokrotne).

Ta funkcja jest obecnie w wersji beta. Włącz ją przez Plik ⟩ Funkcje beta ⟩ Przejścia stylizacji.

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>Menu główne</button>

Luau
-- Reguła przycisku
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selekcja klasy Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Ustaw przejścia właściwości
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

-- Reguła przycisku hover
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Selektor stanu
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Utwórz przycisk tekstowy
local button = Instance.new("TextButton")
button.Text = "Menu główne"
button.Parent = screenGui

Zagnieżdżanie i łączenie

Zaprzęgając koncepcję z SCSS, StyleRules mogą być zagnieżdżane razem, a ich selektory będą łączyć się.

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>Uroki</button>
	<button>Mana</button>
	<button>Zwoje</button>  
</div>

Luau
-- Reguła ramki menu
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

-- Reguła układu menu
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 -- Ustaw regułę ramki menu jako rodzica

-- Reguła przycisku
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 -- Ustaw regułę układu menu jako rodzica

-- Reguła hover przycisku
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Ustaw regułę przycisku jako rodzica

-- Utwórz ramkę rodzica
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Utwórz przyciski wewnątrz ramki
local button1 = Instance.new("TextButton")
button1.Text = "Uroki"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Zwoje"
button3.Parent = menuFrame