Perbandingan CSS | Dokumentasi - Pusat Kreator Roblox

Sebagian besar konsep CSS dipetakan ke konsep styling Roblox. Contoh berikut menunjukkan bagaimana CSS dan HTML selaras dengan kelas/properti Luau dan Roblox.

Untuk menguji setiap contoh script Luau berikut:

Di Explorer, buat yang berikut:
1. Instance StyleSheet di dalam ReplicatedStorage.
2. Kontainer ScreenGui di dalam StarterGui.
3. Instance LocalScript di dalam ScreenGui.
4. Objek StyleLink di dalam ScreenGui.

Di dalam LocalScript, tempelkan kode dukungan berikut:

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

Untuk setiap contoh di bawah ini, tempelkan baris kode Luau mengikuti baris dukungan 1–7.

Selektor

Properti Selector dari StyleRule menentukan instansi mana yang seharusnya dipengaruhi oleh aturan tersebut. Berikut adalah jenis selektor yang dipetakan dari CSS ke Luau dan dapat digunakan dengan kombinator.

Elemen

Setara dengan selektor elemen CSS adalah selektor kelas Roblox yang memilih semua instansi dari kelas GuiObject tertentu, contohnya Frame, ImageLabel, TextButton, dll.

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

HTML
<button>Menu Utama</button>

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

rule.Selector = "TextButton" -- Selektor kelas 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 Utama"
button.Parent = screenGui

Kelas

Setara dengan selektor class CSS di Roblox adalah selektor tag yang memanfaatkan tag yang diterapkan melalui CollectionService.

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

HTML
<button class="button-primary">Menu Utama</button>

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

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

local button = Instance.new("TextButton")
button.Text = "Menu Utama"
button.Parent = screenGui
-- Terapkan tag ke tombol
CollectionService:AddTag(button, "ButtonPrimary")

Identifikasi

Perbandingan terdekat Roblox dengan id CSS adalah selektor #[name] yang memilih berdasarkan nilai dari Instance.Name. Tidak seperti spesifikasi W3C dari atribut id, nama tidak diharapkan unik.

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" -- Selektor nama instansi
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
-- Ganti nama frame agar sesuai dengan selektor
frame.Name = "ModalFrame"

Kombinator

Kombinator memungkinkan Anda mencampur selektor dasar untuk mencocokkan hubungan hierarki yang lebih dalam.

Anak

Selektor anak > identik antara CSS dan 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>Opsi</button>
</div>

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

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

-- Buat kontainer menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Terapkan tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Buat tombol
local button = Instance.new("TextButton")
button.Text = "Opsi"
-- Tetapkan kontainer menu sebagai induk tombol
button.Parent = menuContainer

Keturunan

Berbeda dengan sintaks spasi CSS, misalnya .menu-container button yang terlihat di sini, Roblox menggunakan kombinator >> untuk menunjukkan hubungan keturunan.

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

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

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

-- Buat kontainer menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Terapkan tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Buat sub-kontainer
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Tetapkan kontainer menu sebagai induk sub-kontainer
subContainer.Parent = menuContainer

-- Buat tombol
local button = Instance.new("TextButton")
button.Text = "Opsi"
-- Tetapkan sub-kontainer sebagai induk tombol
button.Parent = subContainer

Daftar Selektor

Beberapa selektor (termasuk selektor dengan kombinator) dapat dideklarasikan dengan blok properti yang sama, dipisahkan oleh koma, untuk mengurangi redundansi.

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

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

<p>Menu Utama</p>

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

rule.Selector = "ImageLabel, TextLabel" -- Selektor untuk label gambar DAN label teks
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

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

-- Buat label teks
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 Utama"
textLabel.Parent = screenGui

Pseudo-kelas

Setara dengan selektor CSS pseudo-class adalah selektor status Roblox yang sesuai dengan salah satu dari empat nilai Enum.GuiState seperti Hover atau 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 status
rule:SetProperty("ImageTransparency", 0.5)

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

Pseudo-instansi

Mirip dengan bagaimana pseudo-elements CSS dapat memodifikasi bagian tertentu dari elemen, Roblox dapat membuat UIComponents phantom melalui properti Selector dari aturan gaya. Misalnya, aturan berikut secara efektif membuat modifier UICorner di bawah setiap Frame yang ditandai dengan RoundedCorner20 dan mengatur CornerRadius setiap modifier ke 20 piksel.

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

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

-- Buat frame
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Terapkan tag ke frame
CollectionService:AddTag(frame, "RoundedCorner20")

Kueri

Kueri gaya Roblox menjembatani kesenjangan antara media queries CSS dan container queries. Menggunakan awalan @, Anda dapat mengubah gaya berdasarkan dimensi induk, jenis perangkat input, atau pengaturan aksesibilitas pengguna.

Dalam CSS, @container menerapkan gaya berdasarkan ukuran elemen induk. Dalam Roblox, Anda mendefinisikan kueri pseudo‑instance menggunakan ::StyleQuery diikuti dengan identifikasi untuk properti Selector dari kondisi tersebut, misalnya "::StyleQuery #WideContainer", bersama dengan nama kondisi StyleQuery seperti "MinSize" untuk mengevaluasi GuiObject.AbsoluteSize induk. Kemudian, untuk menerapkan gaya pada instansi atau anak-anaknya saat kueri aktif, buat StyleRule dengan awalan @[identifier] sebagai Selector, misalnya @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 Utama</button>
</div>

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

-- Aturan tombol
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selektor kelas Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Anak dari aturan kontainer

-- Kondisi kueri (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Anak dari aturan kontainer

-- Aturan yang diterapkan saat kondisi aktif (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Selektor anak
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Anak dari aturan kontainer

-- Buat instansi
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 Utama"
button.Parent = container

Roblox juga menyediakan kueri bawaan yang dipetakan langsung ke status lingkungan global seperti ViewportDisplaySize atau ReducedMotionEnabled. Ini tidak memerlukan definisi ::StyleQuery dan dapat digunakan langsung dengan awalan @.

Fitur Media CSS	Selektor Kueri Gaya 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
-- Aturan kontainer
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Selektor kelas Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Kueri bawaan
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Anak dari aturan kontainer

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

Variabel

CSS memungkinkan Anda mendeklarasikan dan merujuk variabel di seluruh sistem gaya. Roblox mencapainya melalui token dan sistem atribut instansi. Menggunakan $ sebagai awalan, Anda dapat merujuk atribut yang dideklarasikan dalam rantai pewarisan StyleRule atau StyleSheet saat mengatur properti gaya.

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 Utama</button>

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

-- Setel token lembar gaya menggunakan atribut
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

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

-- Buat tombol
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Menu Utama"
button.Parent = screenGui

Transisi

CSS transisi memungkinkan Anda tween nilai properti selama durasi tertentu. Anda dapat mencapai ini di Roblox dengan mengatur transisi properti pada StyleRule melalui SetPropertyTransition() (tunggal) atau SetPropertyTransitions() (beberapa).

Fitur ini saat ini dalam beta. Aktifkan melalui File ⟩ Fitur Beta ⟩ Transisi Styling.

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 Utama</button>

Luau
-- Aturan tombol
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selektor kelas Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Setel perilaku transisi properti
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

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

-- Buat tombol teks
local button = Instance.new("TextButton")
button.Text = "Menu Utama"
button.Parent = screenGui

Pencampuran dan penggabungan

Meminjam konsep dari SCSS, StyleRules dapat dinesting bersama dan selektor mereka akan digabungkan.

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>Benda Ajaib</button>
	<button>Mana</button>
	<button>Gulungan</button>  
</div>

Luau
-- Aturan frame 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

-- Aturan tata letak 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 -- Tetapkan aturan frame menu sebagai induknya

-- Aturan tombol
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 -- Tetapkan aturan frame menu sebagai induknya

-- Aturan hover tombol
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Tetapkan aturan tombol sebagai induknya

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

-- Buat tombol di dalam frame
local button1 = Instance.new("TextButton")
button1.Text = "Benda Ajaib"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Gulungan"
button3.Parent = menuFrame