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 skrip Luau berikut:

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

Di dalam LocalScript, tempelkan kode pendukung 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 setelah baris pendukung 1–7.

Selektor

Properti Selector dari StyleRule menentukan instansi mana yang harus dipengaruhi oleh aturan tersebut. Jenis selektor berikut 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, misalnya 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. Berbeda dengan spesifikasi W3C dari atribut id, nama tidak diharapkan untuk 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 untuk mencocokkan 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"
-- Set 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
-- Set kontainer menu sebagai induk sub-kontainer
subContainer.Parent = menuContainer

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

Daftar selektor

Beberapa selektor (termasuk selektor dengan kombinator) dapat dinyatakan dengan blok properti yang sama, dipisahkan dengan 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 pseudo-kelas CSS 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

Mirip dengan bagaimana pseudo-elemen CSS dapat memodifikasi bagian tertentu dari elemen, Roblox dapat membuat UIComponents hantu melalui properti Selector dari aturan gaya. Misalnya, aturan berikut secara efektif membuat modifikasi UICorner di bawah setiap Frame yang diberi tag RoundedCorner20 dan mengatur CornerRadius setiap modifikasi menjadi 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")

Kuery

Kuery gaya Roblox menjembatani kesenjangan antara kuery media CSS dan kuery kontainer. Menggunakan awalan @, Anda dapat mengalihkan gaya berdasarkan dimensi induk, jenis perangkat input, atau pengaturan aksesibilitas pengguna.

Dalam CSS, @container menerapkan gaya berdasarkan ukuran elemen induk. Di Roblox, Anda mendefinisikan kuery pseudo‑instansi menggunakan ::StyleQuery diikuti oleh identifikasi untuk properti Selector kondisi, misalnya "::StyleQuery #WideContainer", bersama dengan nama kondisi StyleQuery seperti "MinSize" untuk mengevaluasi GuiObject.AbsoluteSize induk. Kemudian, untuk menerapkan gaya ke instansi atau anak-anaknya ketika kuery 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 kuery (#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 ketika 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 kuery 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 Kuery 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

-- Kuery 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 untuk 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

-- Set 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 untuk tween nilai properti selama durasi tertentu. Anda dapat mencapainya di Roblox dengan mengatur transisi properti pada StyleRule melalui SetPropertyTransition() (tunggal) atau SetPropertyTransitions() (beberapa).

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
})
-- Set 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

Pemosisian dan penggabungan

Meminjam konsep dari SCSS, StyleRules dapat dinesting bersama dan selektornya 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>Pesona</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 -- Set aturan frame menu sebagai induk

-- 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 -- Set aturan frame menu sebagai induk

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

-- 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 = "Pesona"
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