Confronti CSS | Documentazione - Roblox Hub Creatori

La maggior parte dei concetti CSS si mappa 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 il seguente:
1. istanza StyleSheet all'interno di ReplicatedStorage.
2. contenitore ScreenGui in StarterGui.
3. istanza LocalScript all'interno di ScreenGui.
4. 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 sottostante, incolla le righe di codice Luau successivamente alle righe di supporto 1-7.

Selettori

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

Elemento

Equivalenti ai selettori di elementi CSS sono i selettori di classe di Roblox, che selezionano tutte le istanze di una determinata 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 di Roblox dei selettori class 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 a id CSS è 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 del 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 consentono di mescolare selettori di base 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 del 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 di discendenza.

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 del 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 sotto-contenitore
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 sotto-contenitore
subContainer.Parent = menuContainer

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

Elenco di selettori

È possibile dichiarare più selettori (inclusi selettori con combinatori) 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 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 di Roblox ai selettori di pseudo-classe CSS sono i selettori di stato, che corrispondono a uno dei quattro valori 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 le pseudo-elementi CSS possono modificare parti specifiche di un elemento, Roblox può creare fantomatici UIComponents tramite 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 raggio di ciascun modificatore CornerRadius 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 queries CSS e le container queries. Utilizzando il prefisso @, puoi attivare gli 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 seguita 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. Poi, per applicare gli stili all'istanza o ai suoi figli quando la query è attiva, crea una StyleRule con il prefisso @[identifier] come selettore 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 del container
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 del 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 del container

-- 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 del container

-- 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 del container

-- 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 predefinite che si mappano direttamente agli stati dell'ambiente globale, 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 del container
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 predefinita
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Figlio della regola del container

-- 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 delle attributi delle istanze. Utilizzando $ come prefisso, puoi fare riferimento ad 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 consentono di tweenere i valori delle proprietà su una durata impostata. Puoi ottenere questo in Roblox impostando le transizioni delle proprietà su una StyleRule tramite SetPropertyTransition() (singola) o SetPropertyTransitions() (multipla).

Questa funzione è attualmente in beta. Abilitala tramite File ⟩ Funzioni Beta ⟩ Transizioni di Stile.

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 del 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 del frame del 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 del layout del 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 del menu come genitore

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