CSS Karşılaştırmaları | Dokümantasyon

Çoğu CSS kavramı, Roblox stil kavramlarına karşılık gelir. Aşağıdaki örnekler, CSS ve HTML'nin Luau ve Roblox sınıfları/özellikleri ile nasıl hizalandığını göstermektedir.

Aşağıdaki Luau script örneklerini test etmek için:

Explorer'da aşağıdakileri oluşturun:
1. StyleSheet örneği içindeki ReplicatedStorage.
2. ScreenGui konteyneri içindeki StarterGui.
3. LocalScript örneği içindeki ScreenGui.
4. StyleLink nesnesi içindeki ScreenGui.

LocalScript'te aşağıdaki destekleyici kodu yapıştırın:

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

Aşağıdaki her örnek için, destekleyici satır 1-7'den sonra Luau kod satırlarını yapıştırın.

Seçiciler

Selector özelliği, bir StyleRule'un hangi örneklerin etkilenmesi gerektiğini belirtir. Aşağıdaki seçici türleri, CSS'ten Luau'ya karşılık gelir ve birleştiricilerle birlikte kullanılabilir.

Eleman

CSS eleman seçicilerine karşılık gelen Roblox sınıf seçicileri, verilen bir GuiObject sınıfının tüm örneklerini seçer; örneğin Frame, ImageLabel, TextButton vb.

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

HTML
<button>Ana Menü</button>

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

rule.Selector = "TextButton" -- Roblox sınıf seçici
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 = "Ana Menü"
button.Parent = screenGui

Sınıf

CSS class seçicileri için Roblox'taki eşdeğer etiket seçicilerdir; CollectionService aracılığıyla uygulanan etiketler kullanır.

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

HTML
<button class="button-primary">Ana Menü</button>

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

rule.Selector = ".ButtonPrimary" -- Roblox etiket seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = screenGui
-- Butona etiket uygulama
CollectionService:AddTag(button, "ButtonPrimary")

Tanımlayıcı

CSS id'ye en yakın Roblox karşılaştırması, #[name] seçicisidir; bu seçici Instance.Name değerine göre seçim yapar. W3C spesifikasyonun aksine, adların benzersiz olması beklenmez.

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" -- Örnek adı seçici
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
-- Seçici ile eşleşecek şekilde frame'i yeniden adlandır
frame.Name = "ModalFrame"

Birleştiriciler

Birleştiriciler, temel seçicileri birleştirerek daha derin hiyerarşi ilişkilerini eşleşmenizi sağlar.

Çocuk

> çocuk seçici, CSS ve Roblox arasında aynıdır.

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>Seçenekler</button>
</div>

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

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

-- Menü konteyneri oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiket uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Düğme oluştur
local button = Instance.new("TextButton")
button.Text = "Seçenekler"
-- Düğmenin ebeveynini menü konteyneri olarak ayarla
button.Parent = menuContainer

Torun

CSS'teki boşluk sözdizimi ile karşılaştırıldığında, örneğin .menu-container button, Roblox, bir torun ilişkisini göstermek için >> birleştiricisini kullanır.

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>Seçenekler</button>
	</div>
</div>

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

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

-- Menü konteyneri oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiket uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Alt konteyner oluştur
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Menü konteynerini alt konteynerin ebeveyni olarak ayarla
subContainer.Parent = menuContainer

-- Düğme oluştur
local button = Instance.new("TextButton")
button.Text = "Seçenekler"
-- Alt konteynerin ebeveyni olarak düğmeyi ayarla
button.Parent = subContainer

Seçici listesi

Birden fazla seçici (birleştiricilerle birlikte olanlar dahil), aynı özellik bloğu ile tanımlanabilir ve virgüllerle ayrılarak tekrarları azaltabilir.

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

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

<p>Ana Menü</p>

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

rule.Selector = "ImageLabel, TextLabel" -- Resim etiketleri VE metin etiketleri için seçici
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Resim etiketi oluştur
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Metin etiketi oluştur
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 = "Ana Menü"
textLabel.Parent = screenGui

Öncelik sınıfları

Roblox'taki CSS öncelik sınıfı seçicilerine karşılık gelenler durum seçicileridir; bu seçiciler, Enum.GuiState gibi dört değerine karşılık gelir, örneğin Hover veya 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" -- Durum seçici
rule:SetProperty("ImageTransparency", 0.5)

-- Resim etiketi oluştur
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

CSS öncelikli elemanlar belirli bir öğenin belirli parçalarını değiştirebilir; Roblox, bir stil kuralının Selector özelliği aracılığıyla hayalet UIComponents oluşturabilir. Örneğin, aşağıdaki kural etkili bir şekilde RoundedCorner20 etiketi olan her Frame altında bir UICorner modifikasyonu oluşturur ve her modifikatörün CornerRadius'ını 20 piksel olarak ayarlar.

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

rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI bileşen seçici
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Frame oluştur
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Frame'e etiket uygula
CollectionService:AddTag(frame, "RoundedCorner20")

Sorgular

Roblox stil sorguları, CSS medya sorguları ve konteyner sorgularına köprü kurar. @ ön ekini kullanarak, ebeveyn boyutlarına, girdi cihazı türlerine veya kullanıcının erişim ayarlarına göre stilleri açıp kapatabilirsiniz.

CSS'te, @container stilleri, bir üst öğenin boyutuna bağlı olarak uygular. Roblox'ta, Selector özelliği için koşulun StyleQuery adını takip eden bir tanımlayıcı kullanarak bir sahte örnek sorgusu tanımlarsınız, örneğin "::StyleQuery #WideContainer", yanı sıra ebeveynin GuiObject.AbsoluteSize'ını değerlendirmek için "MinSize" gibi bir StyleQuery koşul adı ile birlikte. Daha sonra sorgu aktif olduğunda, örneğe veya çocuklarına stiller uygulamak için @[identifier] öneki olan bir StyleRule oluşturursunuz; örneğin @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>Ana Menü</button>
</div>

Luau
-- Konteyner kuralı
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox sınıf seçici
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Düğme kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox sınıf seçici
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Konteyner kuralının çocuğu

-- Sorgu koşulu (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Konteyner kuralının çocuğu

-- Koşul aktifken uygulanan kural (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Çocuk seçici
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Konteyner kuralının çocuğu

-- Örnekler oluştur
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = container

Roblox ayrıca ViewportDisplaySize veya ReducedMotionEnabled gibi global çevre durumlarına doğrudan karşılık gelen yerleşik sorgular sunar. Bunlar ::StyleQuery tanımı gerektirmez ve doğrudan @ ön eki ile kullanılabilir.

CSS Medya Özelliği	Roblox Stil Sorgu Seçici
(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
-- Konteyner kuralı
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox sınıf seçici
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Yerleşik sorgu
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Konteyner kuralının çocuğu

-- Örnekler oluştur
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Değişkenler

CSS, bir stil sistemi genelinde değişkenler tanımlayıp referans vermenize izin verir. Roblox, bunu token'lar ve örnek özellikleri sistemi aracılığıyla gerçekleştirir. $ öneki kullanarak, stil özelliklerini ayarlarken bir StyleRule veya StyleSheet miras zinciri içinde tanımlanan özelliklere atıfta bulunabilirsiniz.

CSS
:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML
<button>Ana Menü</button>

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

-- Stil sayfası token'larını özellikler aracılığıyla ayarla
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- Sınıf seçici
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- Düğmeyi oluştur
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Ana Menü"
button.Parent = screenGui

Geçişler

CSS geçişler, özellik değerlerini belirli bir süre zarfında tween yapmanıza olanak tanır. Bu, StyleRule üzerindeki özellik geçişlerini ayarlayarak Roblox'ta gerçekleştirilebilir; SetPropertyTransition() (tek) veya SetPropertyTransitions() (birden fazla) kullanarak.

Bu özellik şu anda beta sürümünde. Dosya ⟩ Beta Özellikleri ⟩ Stil Geçişleri ile etkinleştirin.

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>Ana Menü</button>

Luau
-- Düğme kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox sınıf seçici
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Özellik geçiş davranışlarını ayarla
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

-- Düğme hover kuralı
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Durum seçici
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Metin düğmesini oluştur
local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = screenGui

İç içe geçme ve birleştirme

SCSS konseptinden alınan bir kavram olan StyleRules birbirine iç içe geçmiş olabilir ve seçicileri birleşir.

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>Şıklar</button>
	<button>Mana</button>
	<button>Parşömenler</button>  
</div>

Luau
-- Menü çerçevesi kuralı
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

-- Menü düzeni kuralı
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 -- Menü çerçevesi kuralını ebeveyn olarak ayarlayın

-- Düğme kuralı
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 -- Menü çerçevesi kuralını ebeveyn olarak ayarlayın

-- Düğme hover kuralı
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Düğme kuralını ebeveyn olarak ayarla

-- Ebeveyn çerçevesi oluştur
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Çerçeve içinde düğmeler oluştur
local button1 = Instance.new("TextButton")
button1.Text = "Şıklar"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Parşömenler"
button3.Parent = menuFrame