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

A maioria dos conceitos de CSS se relaciona aos conceitos de estilização do Roblox. Os exemplos a seguir mostram como CSS e HTML se alinham com Luau e as classes/propriedades do Roblox.

Para testar cada um dos exemplos de script Luau a seguir:

No Explorer, crie o seguinte:
1. Instância StyleSheet dentro de ReplicatedStorage.
2. Contêiner ScreenGui em StarterGui.
3. Instância LocalScript dentro de ScreenGui.
4. Objeto StyleLink dentro de 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 um StyleRule especifica quais instâncias a regra deve afetar. Os seguintes tipos de seletores mapeiam de CSS para Luau e podem ser usados com combinadores.

O 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>Main Menu</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 = "Main Menu"
button.Parent = screenGui

Classe

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

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

HTML
<button class="button-primary">Main Menu</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 = "Main Menu"
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 precisam ser exclusivos.

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 o frame para corresponder ao seletor
frame.Name = "ModalFrame"

Combinadores

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

Filho

O seletor de filho > é 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>Options</button>
</div>

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

rule.Selector = ".MenuContainer > TextButton" -- Seletor de 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 = "Options"
-- Definir o 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 utiliza o combinador >> para indicar uma relação 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>Options</button>
	</div>
</div>

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

rule.Selector = ".MenuContainer >> TextButton" -- Seletor de 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 o contêiner de menu como pai do sub-contêiner
subContainer.Parent = menuContainer

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

Lista de seletores

Vários seletores (incluindo seletores com combinadores) podem ser declarados com o mesmo bloco de propriedades, separados por vírgulas, para reduzir redundância.

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

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

<p>Main Menu</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 = "Main Menu"
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 ao modo 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 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 conectam a lacuna entre as consultas de mídia 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 por 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. Em seguida, para aplicar estilos à instância ou seus filhos quando a consulta estiver ativa, crie um 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>Main Menu</button>
</div>

Luau
-- Regra de 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 de 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 = "Main Menu"
button.Parent = container

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

CSS Media Feature	Roblox Style Query Selector
(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 de 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 embutida
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 faça referência a variáveis por todo um sistema de estilo. O Roblox consegue 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>Main Menu</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 = "Main Menu"
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 conseguir isso no Roblox definindo transições de propriedades em uma StyleRule através de SetPropertyTransition() (única) ou SetPropertyTransitions() (múltiplas).

Esse recurso está atualmente em beta. Ative-o através de Arquivo ⟩ Recursos beta ⟩ Transições de Estilo.

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>Main Menu</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 propriedade
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 = "Main Menu"
button.Parent = screenGui

Aninhamento e fusão

Tomando emprestado um conceito do SCSS, StyleRules podem ser aninhados juntos e seus seletores se fundem.

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>Charms</button>
	<button>Mana</button>
	<button>Scrolls</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 do 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 a 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 a 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 a 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 = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame