Confronti CSS | Documentazione - Roblox Hub Creatori

La maggior parte dei concetti CSS si mappano ai concetti di stile di Roblox. I seguenti esempi mostrano come CSS e HTML si allineano con Luau e le classi/proprietà di Roblox.

Per testare ciascuno dei seguenti esempi di script Luau:

Nell'Esplora, crea quanto segue:
1. Un'istanza di StyleSheet all'interno di ReplicatedStorage.
2. Un contenitore ScreenGui in StarterGui.
3. Un'istanza di LocalScript all'interno di ScreenGui.
4. Un oggetto StyleLink all'interno di ScreenGui.

Nel LocalScript, incolla il seguente codice di supporto:

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

Per ciascun esempio qui sotto, incolla le righe di codice Luau dopo le righe di supporto 1–7.

Selettori

La proprietà Selector di un StyleRule specifica quali istanze la regola dovrebbe influenzare. I seguenti tipi di selettori si mappano da CSS a Luau e possono essere utilizzati con combinatori.

Elemento

Equivalenti ai selettori di elementi CSS sono i selettori di classe di Roblox che selezionano tutte le istanze di una data classe GuiObject, ad esempio Frame, ImageLabel, TextButton, ecc.

CSS

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

HTML

<button>Menu Principale</button>

Luau

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

rule.Selector = "TextButton" -- Selettore di classe 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 Principale"
button.Parent = screenGui

Classe

L'equivalente Roblox dei selettori di classe CSS sono i selettori di tag che utilizzano tag applicati tramite CollectionService.

CSS

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

HTML

<button class="button-primary">Menu Principale</button>

Luau

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

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

local button = Instance.new("TextButton")
button.Text = "Menu Principale"
button.Parent = screenGui
-- Applica tag al pulsante
CollectionService:AddTag(button, "ButtonPrimary")

Il confronto più vicino di Roblox al CSS id è il selettore #[name] che seleziona in base al valore di Instance.Name. A differenza della specifica W3C dell'attributo id, i nomi non sono attesi per essere unici.

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" -- Selettore di nome dell'istanza
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
-- Rinomina il frame per corrispondere al selettore
frame.Name = "ModalFrame"

Combinatori

I combinatori ti permettono di mescolare selettori di base selettori per abbinare relazioni gerarchiche più profonde.

Figlio

Il selettore figlio di > è identico tra CSS e 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>Opzioni</button>
</div>

Luau

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

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

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

-- Crea pulsante
local button = Instance.new("TextButton")
button.Text = "Opzioni"
-- Imposta il contenitore del menu come genitore del pulsante
button.Parent = menuContainer

Discendente

A differenza della sintassi degli spazi bianchi CSS, ad esempio .menu-container button vista qui, Roblox utilizza il combinatore >> per indicare una relazione discendente.

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

Luau

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

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

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

-- Crea sottocontainer
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Imposta il contenitore del menu come genitore del sottocontainer
subContainer.Parent = menuContainer

-- Crea pulsante
local button = Instance.new("TextButton")
button.Text = "Opzioni"
-- Imposta il sottocontainer come genitore del pulsante
button.Parent = subContainer

Elenco di selettori

Più selettori (inclusi selettori con combinatori) possono essere dichiarati con lo stesso blocco di proprietà, separati da virgole, per ridurre la ridondanza.

CSS

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

HTML

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

<p>Menu Principale</p>

Luau

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

rule.Selector = "ImageLabel, TextLabel" -- Selettore per etichette di immagine E etichette di testo
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

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

-- Crea etichetta di testo
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 Principale"
textLabel.Parent = screenGui

Pseudo-classi

L'equivalente Roblox dei selettori pseudo-classe CSS sono i selettori di stato che corrispondono a uno dei quattro valori di Enum.GuiState, come Hover o 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" -- Selettore di stato
rule:SetProperty("ImageTransparency", 0.5)

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

Pseudo-istanze

Simile a come i pseudo-elementi CSS possono modificare parti specifiche di un elemento, Roblox può creare UIComponents fantasma attraverso la proprietà Selector di una regola di stile. Ad esempio, la seguente regola crea effettivamente un modificatore UICorner sotto ogni Frame contrassegnato con RoundedCorner20 e imposta il CornerRadius di ciascun modificatore a 20 pixel.

Luau

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

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

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

Query

Le query di stile di Roblox colmano il divario tra le media query CSS e le query di contenitore. Utilizzando il prefisso @, puoi attivare stili in base alle dimensioni del genitore, ai tipi di dispositivi di input o alle impostazioni di accessibilità dell'utente.

In CSS, @container applica stili in base alla dimensione di un elemento genitore. In Roblox, definisci una query di pseudo-istanza utilizzando ::StyleQuery seguito da un identificatore per la proprietà Selector della condizione, ad esempio "::StyleQuery #WideContainer", insieme a un nome di condizione StyleQuery come "MinSize" per valutare la GuiObject.AbsoluteSize del genitore. Quindi, per applicare stili all'istanza o ai suoi figli quando la query è attiva, crea un StyleRule con il prefisso @[identifier] come suo Selector, ad esempio @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 Principale</button>
</div>

Luau

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

-- Regola pulsante
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selettore di classe Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Figlio della regola contenitore

-- Condizione di query (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Figlio della regola contenitore

-- Regola che si applica quando la condizione è attiva (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Selettore figlio
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Figlio della regola contenitore

-- Crea istanze
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 Principale"
button.Parent = container

Roblox fornisce anche query integrate che si mappano direttamente agli stati globali dell'ambiente come ViewportDisplaySize o ReducedMotionEnabled. Queste non richiedono una definizione ::StyleQuery e possono essere utilizzate direttamente con un prefisso @.

Caratteristica media CSS	Selettore di query di stile 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

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

-- Query integrata
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Figlio della regola contenitore

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

Variabili

CSS ti consente di dichiarare e fare riferimento a variabili in tutto un sistema di stile. Roblox raggiunge questo attraverso token e il sistema di attributi delle istanze. Utilizzando $ come prefisso, puoi fare riferimento agli attributi dichiarati in una catena di ereditarietà di StyleRule o StyleSheet quando imposti le proprietà di stile.

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

Luau

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

-- Imposta i token del foglio di stile utilizzando attributi
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

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

-- Crea pulsante
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Menu Principale"
button.Parent = screenGui

Transizioni

Le transizioni CSS ti consentono di animare i valori delle proprietà su una durata impostata. Puoi ottenere questo in Roblox impostando le transizioni delle proprietà su un StyleRule tramite SetPropertyTransition() (singolo) o SetPropertyTransitions() (multiplo).

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

Luau

-- Regola pulsante
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Selettore di classe Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Imposta comportamenti di transizione delle proprietà
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

-- Regola hover del pulsante
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Selettore di stato
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Crea pulsante di testo
local button = Instance.new("TextButton")
button.Text = "Menu Principale"
button.Parent = screenGui

Annidamento e fusione

Prendendo in prestito un concetto da SCSS, le StyleRules possono essere annidate insieme e i loro selettori si fonderanno.

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>Charm</button>
	<button>Mana</button>
	<button>Rotoli</button>  
</div>

Luau

-- Regola 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

-- Regola layout 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 -- Imposta la regola del frame menu come genitore

-- Regola pulsante
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 -- Imposta la regola del frame menu come genitore

-- Regola hover del pulsante
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Imposta la regola del pulsante come genitore

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

-- Crea pulsanti all'interno del frame
local button1 = Instance.new("TextButton")
button1.Text = "Charm"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Rotoli"
button3.Parent = menuFrame