Comparações de CSS | Documentação - Central de Criadores Roblox

A maioria dos conceitos de CSS se mapeia para os conceitos de estilo do Roblox. Os seguintes exemplos mostram como CSS e HTML se alinham com Luau e classes/propriedades do Roblox.

Para testar cada um dos seguintes exemplos de script Luau:

No Explorer, crie o seguinte:
1. Instância StyleSheet dentro de ReplicatedStorage.
2. Contêiner ScreenGui em StarterGui.
3. Instância LocalScript dentro do ScreenGui.
4. Objeto StyleLink dentro do ScreenGui.

No LocalScript, cole o seguinte código de suporte:

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

Para cada exemplo abaixo, cole as linhas de código Luau seguindo as linhas de suporte 1–7.

Seletores

A propriedade Selector de uma StyleRule especifica quais instâncias a regra deve afetar. Os seguintes tipos de seletores se mapeiam do CSS para Luau e podem ser usados com combinadores.

Equivalente aos seletores de elemento CSS são os seletores de classe do Roblox, que selecionam todas as instâncias de uma determinada classe GuiObject, por exemplo, Frame, ImageLabel, TextButton, etc.

CSS

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

HTML

<button>Menu Principal</button>

Luau

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

rule.Selector = "TextButton" -- Seletor de classe do 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 Principal"
button.Parent = screenGui

Classe

O equivalente do Roblox aos seletores de classe do CSS são os seletores de tag, que utilizam tags aplicadas através do CollectionService.

CSS

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

HTML

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

Luau

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

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

local button = Instance.new("TextButton")
button.Text = "Menu Principal"
button.Parent = screenGui
-- Aplicar tag ao botão
CollectionService:AddTag(button, "ButtonPrimary")

Identificador

A comparação mais próxima do Roblox ao id do CSS é o seletor #[name], que seleciona de acordo com o valor de Instance.Name. Ao contrário da especificação W3C do atributo id, os nomes não são esperados para serem únicos.

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" -- Seletor de nome da instância
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
-- Renomear frame para corresponder ao seletor
frame.Name = "ModalFrame"

Combinadores

Combinadores permitem que você misture seletores básicos seletores para corresponder a relacionamentos de hierarquia mais profundos.

Filho

O seletor filho de > é idêntico entre 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>Opções</button>
</div>

Luau

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

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

-- Criar contêiner de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Criar botão
local button = Instance.new("TextButton")
button.Text = "Opções"
-- Definir contêiner de menu como pai do botão
button.Parent = menuContainer

Descendente

Ao contrário da sintaxe de espaço em branco do CSS, por exemplo .menu-container button vista aqui, o Roblox usa o combinador >> para indicar um relacionamento de descendente.

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>Opções</button>
	</div>
</div>

Luau

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

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

-- Criar contêiner de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar tag
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Criar sub-contêiner
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Definir contêiner de menu como pai do sub-contêiner
subContainer.Parent = menuContainer

-- Criar botão
local button = Instance.new("TextButton")
button.Text = "Opções"
-- Definir sub-contêiner como pai do botão
button.Parent = subContainer

Lista de seletores

Múltiplos seletores (incluindo seletores com combinadores) podem ser declarados com o mesmo bloco de propriedades, separados por vírgulas, para reduzir a redundância.

CSS

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

HTML

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

<p>Menu Principal</p>

Luau

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

rule.Selector = "ImageLabel, TextLabel" -- Seletor para rótulos de imagem E rótulos de texto
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Criar rótulo de imagem
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Criar rótulo de texto
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 Principal"
textLabel.Parent = screenGui

Pseudo-classes

O equivalente do Roblox aos seletores de pseudo-classe do CSS são os seletores de estado, que correspondem a um dos quatro valores de Enum.GuiState, como Hover ou 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" -- Seletor de estado
rule:SetProperty("ImageTransparency", 0.5)

-- Criar rótulo de imagem
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

Pseudo-instâncias

Semelhante a como os pseudo-elementos do CSS podem modificar partes específicas de um elemento, o Roblox pode criar UIComponents fantasmas através da propriedade Selector de uma regra de estilo. Por exemplo, a seguinte regra efetivamente cria um modificador UICorner sob cada Frame marcado com RoundedCorner20 e define o CornerRadius de cada modificador para 20 pixels.

Luau

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

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

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

Consultas

As consultas de estilo do Roblox preenchem a lacuna entre as consultas de mídia do CSS e as consultas de contêiner. Usando o prefixo @, você pode alternar estilos com base nas dimensões do pai, tipos de dispositivos de entrada ou configurações de acessibilidade do usuário.

No CSS, @container aplica estilos com base no tamanho de um elemento pai. No Roblox, você define uma consulta de pseudo-instância usando ::StyleQuery seguida de um identificador para a propriedade Selector da condição, por exemplo "::StyleQuery #WideContainer", juntamente com um nome de condição StyleQuery como "MinSize" para avaliar o GuiObject.AbsoluteSize do pai. Então, para aplicar estilos à instância ou seus filhos quando a consulta estiver ativa, crie uma StyleRule com o prefixo @[identifier] como seu Selector, por exemplo @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 Principal</button>
</div>

Luau

-- Regra do contêiner
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Seletor de classe do Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Regra do botão
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Seletor de classe do Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Filho da regra do contêiner

-- Condição de consulta (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Filho da regra do contêiner

-- Regra que se aplica quando a condição está ativa (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Seletor filho
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Filho da regra do contêiner

-- Criar instâncias
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 Principal"
button.Parent = container

O Roblox também fornece consultas integradas que se mapeiam diretamente para estados globais do ambiente, como ViewportDisplaySize ou ReducedMotionEnabled. Estas não requerem uma definição de ::StyleQuery e podem ser usadas diretamente com um prefixo @.

Recurso de Mídia CSS	Seletor de Consulta de Estilo do 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

-- Regra do contêiner
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Seletor de classe do Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Consulta integrada
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Filho da regra do contêiner

-- Criar instâncias
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Variáveis

O CSS permite que você declare e referencie variáveis em todo um sistema de estilo. O Roblox alcança isso através de tokens e do sistema de atributos de instância. Usando $ como prefixo, você pode referenciar atributos declarados em uma cadeia de herança de StyleRule ou StyleSheet ao definir propriedades de estilo.

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

Luau

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

-- Definir tokens da folha de estilo usando atributos
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

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

-- Criar botão
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Menu Principal"
button.Parent = screenGui

Transições

As transições do CSS permitem que você faça a interpolação de valores de propriedades ao longo de uma duração definida. Você pode alcançar isso no Roblox definindo transições de propriedades em uma StyleRule através de SetPropertyTransition() (única) ou SetPropertyTransitions() (múltiplas).

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

Luau

-- Regra do botão
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Seletor de classe do Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Definir comportamentos de transição de propriedades
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

-- Regra de hover do botão
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Seletor de estado
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Criar botão de texto
local button = Instance.new("TextButton")
button.Text = "Menu Principal"
button.Parent = screenGui

Aninhamento e mesclagem

Tomando emprestado um conceito do SCSS, StyleRules podem ser aninhados juntos e seus seletores mesclarão.

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>Encantos</button>
	<button>Mana</button>
	<button>Rolos</button>  
</div>

Luau

-- Regra do frame do 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

-- Regra de layout do 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 -- Definir regra do frame do menu como pai

-- Regra do botão
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 -- Definir regra do frame do menu como pai

-- Regra de hover do botão
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Definir regra do botão como pai

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

-- Criar botões dentro do frame
local button1 = Instance.new("TextButton")
button1.Text = "Encantos"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Rolos"
button3.Parent = menuFrame