Comparaisons CSS

props.leadIn Fichier > Fonctions bêta > props.betaName props.leadOut

La plupart des concepts CSS se traduisent en concepts de style Roblox. Les exemples suivants montrent comment le CSS et HTML s'alignent sur les classes/propriétés Luau et Roblox.

Pour tester chacun des exemples de script Luau suivants :

Dans le explorateur, créez ce qui suit :
1. StyleSheet instance nommée CoreSheet à l'intérieur de ReplicatedStorage .
2. Instance vide StyleRule comme enfant de CoreSheet .
3. ScreenGui conteneur dans StarterGui .
4. LocalScript instance à l'intérieur du ScreenGui.
5. StyleLink objet à l'intérieur du ScreenGui dont la propriété StyleSheet est liée à CoreSheet .

Dans le LocalScript, collez le code de soutien suivant :

Lecteur localScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
local screenGui = script.Parent

Pour chaque exemple ci-dessous, collez les lignes de code Luau suivant les lignes de soutien 1–6.

Sélecteurs

La propriété Selector d'un StyleRule spécifie les instances auxquelles la règle doit s'appliquer.Les types de sélecteur suivants traduisent du CSS vers Luau et peuvent être utilisés avec des combinateurs.

Élément

Équivalent aux sélecteurs d'éléments CSS sont les sélecteurs de classe Roblox qui sélectionnent toutes les instances d'une classe donnée, par exemple , , , , etc.

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

HTML
<button>Main Menu</button>

Luau
-- Sélecteur de classe
rule.Selector = "TextButton"

-- Définir les propriétés de règles
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

Les équivalents Roblox de CSS class sélecteurs sont des sélecteurs de balises qui utilisent des balises appliquées via CollectionService.

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

HTML
<button class="button-primary">Main Menu</button>

Luau
-- Sélecteur de balise
rule.Selector = ".ButtonPrimary"

-- Définir les propriétés de règles
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
-- Appliquer le tag au bouton
CollectionService:AddTag(button, "ButtonPrimary")

Identifiant

La comparaison Roblox la plus proche à CSS id est le sélecteur #[name] qui sélectionne selon la valeur de Instance.Name .Contrairement à la spécification W3C de l'attribut id, les noms ne sont pas attendus pour être uniques.

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
-- Sélecteur de nom d'instance
rule.Selector = "#ModalFrame"

-- Définir les propriétés de règles
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
-- Renommer le cadre pour correspondre au sélecteur
frame.Name = "ModalFrame"

Combinateurs

Les combinateurs vous permettent de mélanger des sélecteurs de base pour correspondre à des relations de hiérarchie plus profondes.

Enfant

Le sélecteur d'enfant de > est identique entre CSS et 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
-- Sélecteur d'enfant
rule.Selector = ".MenuContainer > TextButton"

-- Définir les propriétés de règle pour l'enfant
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Créer conteneur de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Appliquer la balise
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Créer bouton
local button = Instance.new("TextButton")
button.Text = "Options"
-- Définir le conteneur de menu comme parent du bouton
button.Parent = menuContainer

Descendant

Contrairement à la syntaxe d'espace blanc CSS, par exemple ici, Roblox utilise le combinateur pour indiquer une relation descendante.

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
-- Sélecteur descendant
rule.Selector = ".MenuContainer >> TextButton"

-- Définir les propriétés de règle pour le descendant
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Créer conteneur de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Appliquer la balise
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Créer un sous-conteneur
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Définir le conteneur de menu comme parent du sous-conteneur
subContainer.Parent = menuContainer

-- Créer bouton
local button = Instance.new("TextButton")
button.Text = "Options"
-- Définir le sous-conteneur comme parent du bouton
button.Parent = subContainer

Liste sélectrice

Plusieurs sélecteurs (y compris les sélecteurs avec des combinateurs) peuvent être déclarés avec le même bloc de propriété, séparés par des virgules, pour réduire la redondance.

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

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

<p>Main Menu</p>

Luau
-- Sélecteur pour les étiquettes d'image ET les étiquettes de texte
rule.Selector = "ImageLabel, TextLabel"

-- Définir une propriété commune pour les classes
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Créer une étiquette d'image
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Créer une étiquette de texte
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

Classements pseudo

Les équivalents Roblox de CSS pseudo-classes sélecteurs sont sélecteurs d'état qui correspondent à l'une des quatre valeurs Enum.GuiState telles que Hover ou Press.

CSS
img:hover {
	opacity: 0.5;
}

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

Luau
-- Sélecteur d'état
rule.Selector = "ImageLabel:Hover"

-- Définir la propriété de règle
rule:SetProperty("ImageTransparency", 0.5)

-- Créer une étiquette d'image
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

Pseudo-instances

Semblable à la façon dont les pseudo-éléments CSS peuvent modifier des parties spécifiques d'un élément, Roblox peut créer un fantôme à travers la propriété d'une règle de style .Par exemple, la règle suivante crée efficacement un modifieur UICorner sous chaque étiquette Frame avec RoundedCorner20 et définit les pixels de chaque modifieur CornerRadius à 20.

Luau
-- Sélecteur de composants d'interface utilisateur
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Définir la propriété de règle
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Créer cadre
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Appliquer la balise à la框架
CollectionService:AddTag(frame, "RoundedCorner20")

Variables

CSS vous permet de déclarer et de référencer variables à travers un système de style.Roblox y parvient grâce aux jetons et au système d'attributs d'instance .En utilisant $ comme préfixe, vous pouvez référencer les attributs déclarés dans une chaîne d'héritage StyleRule ou StyleSheet lorsque vous définissez des propriétés de style.

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
-- Définir des jetons de feuille de style en utilisant des attributs
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Sélecteur de classe
rule.Selector = "TextButton"

-- Définir les propriétés de règles
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Créer bouton
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Nidification et fusion

En empruntant un concept de SCSS, StyleRules peut être imbriqué ensemble et leurs sélecteurs se combineront fusionner .

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
-- Règle de menu cadre
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Parent = coreSheet
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("000022"),
	["Size"] = UDim2.new(0.25, 0, 0, 200),
	["AutomaticSize"] = Enum.AutomaticSize.Y
})

-- Règle de mise en page du menu
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Définir la règle de menu comme règle parent
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Règle de bouton
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Définir la règle de menu comme règle parent
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Règle de survie des boutons
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Définir la règle de bouton comme parent
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Créer cadre parent
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Créer des boutons à l'intérieur du cadre
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

Sur cette page