مقارنات CSS | المراجع - مركز مصمّمي Roblox

تتوافق معظم مفاهيم CSS مع مفاهيم تنسيق Roblox. توضح الأمثلة التالية كيف يتماشى CSS وHTML مع لواو وفصول/خصائص Roblox.

لاختبار كل من أمثلة نص لواو التالية:

في المستكشف، أنشئ ما يلي:
1. مثيل StyleSheet داخل ReplicatedStorage.
2. حاوية ScreenGui في StarterGui.
3. مثيل LocalScript داخل ScreenGui.
4. كائن StyleLink داخل ScreenGui.

في LocalScript، ألصق الكود الداعم التالي:

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

لكل مثال أدناه، ألصق سطور الكود لواو التالية بعد السطور الداعمة 1–7.

المحددات

تحدد خاصية Selector لـ StyleRule أي من المثيلات يجب أن تؤثر عليها القاعدة. تتوافق أنواع المحددات التالية من CSS مع لواو ويمكن استخدامها مع المركبات.

العنصر

مكافئ لمحددات عناصر CSS هي محددات الفئات في Roblox والتي تحدد جميع مثيلات فئة معينة من GuiObject، على سبيل المثال Frame وImageLabel وTextButton وما إلى ذلك.

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

HTML
<button>القائمة الرئيسية</button>

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

rule.Selector = "TextButton" -- محدد فئة 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 = "القائمة الرئيسية"
button.Parent = screenGui

الفئة

المكافئ في Roblox لمحددات الفئة CSS هي محددات العلامات التي تستخدم العلامات المطبقة من خلال CollectionService.

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

HTML
<button class="button-primary">القائمة الرئيسية</button>

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

rule.Selector = ".ButtonPrimary" -- محدد علامة Roblox
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "القائمة الرئيسية"
button.Parent = screenGui
-- تطبيق العلامة على الزر
CollectionService:AddTag(button, "ButtonPrimary")

المعرف

أقرب مقارنة في Roblox لمحدد CSS id هو محدد #[name] الذي يحدد وفقًا لقيمة Instance.Name. على عكس مواصفة W3C لخاصية id، فإن الأسماء ليست متوقعة لتكون فريدة.

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" -- محدد اسم المثيل
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
-- إعادة تسمية الإطار ليتناسب مع المحدد
frame.Name = "ModalFrame"

المركبات

تتيح لك المركبات خلط المحددات الأساسية لتحديد العلاقات الهرمية الأعمق.

الطفل

محدد الطفل > هو متطابق بين CSS و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>الخيارات</button>
</div>

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

rule.Selector = ".MenuContainer > TextButton" -- محدد الطفل
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- إنشاء حاوية القائمة
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- تطبيق العلامة
CollectionService:AddTag(menuContainer, "MenuContainer")

-- إنشاء الزر
local button = Instance.new("TextButton")
button.Text = "الخيارات"
-- تعيين الحاوية كوالد للزر
button.Parent = menuContainer

النسخة السلفية

على عكس صياغة المسافات البيضاء في CSS، مثل .menu-container button الموضحة هنا، تستخدم Roblox المركب >> للإشارة إلى علاقة النسخة السلفية.

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>الخيارات</button>
	</div>
</div>

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

rule.Selector = ".MenuContainer >> TextButton" -- محدد النسخة السلفية
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- إنشاء حاوية القائمة
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- تطبيق العلامة
CollectionService:AddTag(menuContainer, "MenuContainer")

-- إنشاء الحاوية الفرعية
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- تعيين الحاوية كوالد للحاوية الفرعية
subContainer.Parent = menuContainer

-- إنشاء الزر
local button = Instance.new("TextButton")
button.Text = "الخيارات"
-- تعيين الحاوية الفرعية كوالد للزر
button.Parent = subContainer

قائمة المحددات

يمكن الإعلان عن محددات متعددة (بما في ذلك المحددات ذات المركبات) بنفس كتلة الخصائص، مفصولة بفواصل، لتقليل الازدواجية.

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

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

<p>القائمة الرئيسية</p>

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

rule.Selector = "ImageLabel, TextLabel" -- محدد لعلامات الصور وعلامات النص
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- إنشاء علامة الصورة
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- إنشاء علامة النص
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 = "القائمة الرئيسية"
textLabel.Parent = screenGui

الحالة الزائفة

المكافئ في Roblox لمحددات الحالة الزائفة للـ CSS هي محددات الحالة التي تتوافق مع إحدى القيم الأربع لـ Enum.GuiState مثل Hover أو 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" -- محدد الحالة
rule:SetProperty("ImageTransparency", 0.5)

-- إنشاء علامة الصورة
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

على غرار كيفية تعديلا CSS العناصر الزائفة أجزاء محددة من عنصر، يمكن لـ Roblox إنشاء UIComponents خيالية من خلال خاصية Selector لقواعد الأنماط. على سبيل المثال، القاعدة التالية تقوم بشكل فعال بإنشاء معدّل UICorner تحت كل Frame والتي تحمل العلامة RoundedCorner20 وتُعين كل معدل إلى CornerRadius إلى 20 بكسل.

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

rule.Selector = "Frame.RoundedCorner20::UICorner" -- محدد مكون واجهة المستخدم
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- إنشاء إطار
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- تطبيق العلامة على الإطار
CollectionService:AddTag(frame, "RoundedCorner20")

الاستعلامات

توفر استعلامات أنماط Roblox جسرًا بين CSS استعلامات الوسائط واستعلامات الحاوية. باستخدام سابق @، يمكنك تبديل الأنماط استنادًا إلى أبعاد الوالد، أو أنواع أجهزة الإدخال، أو إعدادات إمكانية الوصول للمستخدم.

في CSS، يطبق @container الأنماط بناءً على حجم عنصر الوالد. في Roblox، تعرف استعلامًا زائفًا باستخدام ::StyleQuery تليه معرف لخاصية Selector الشرط، مثل "::StyleQuery #WideContainer"، جنبًا إلى جنب مع اسم شرط StyleQuery مثل "MinSize" لتقييم حجم GuiObject.AbsoluteSize للوالد. ثم، لتطبيق الأنماط على المثيل أو أطفالها عند تفعيل الاستعلام، أنشئ StyleRule مع سابقة @[identifier] كمحدد لـ Selector، مثل @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>القائمة الرئيسية</button>
</div>

Luau
-- قاعدة الحاوية
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- محدد فئة Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- قاعدة الزر
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- محدد فئة Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- ابن لقاعدة الحاوية

-- شرط الاستعلام (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- ابن لقاعدة الحاوية

-- قاعدة تُطبق عند تفعيل الشرط (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- محدد الطفل
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- ابن لقاعدة الحاوية

-- إنشاء المثيلات
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "القائمة الرئيسية"
button.Parent = container

توفر Roblox أيضًا استعلامات مدمجة تتوافق مباشرة مع حالات البيئة العالمية مثل ViewportDisplaySize أو ReducedMotionEnabled. لا تتطلب هذه تعريف ::StyleQuery ويمكن استخدامها مباشرة مع سابقة @.

ميزة وسائل الإعلام CSS	محدد استعلام أنماط 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
-- قاعدة الحاوية
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- محدد فئة Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- الاستعلام المدمج
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- ابن لقاعدة الحاوية

-- إنشاء المثيلات
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

المتغيرات

يسمح لك CSS بإعلان والرجوع إلى المتغيرات في جميع أنحاء نظام الأنماط. تحقق Roblox ذلك من خلال الرموز ونظام سمات المثيل. باستخدام $ كسابق، يمكنك الرجوع إلى السمات المعلنة في سلسلة وراثة StyleRule أو StyleSheet عند تعيين خصائص التصميم.

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

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

HTML
<button>القائمة الرئيسية</button>

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

-- تعيين رموز ورقة الأنماط باستخدام السمات
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- محدد الفئة
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- إنشاء الزر
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "القائمة الرئيسية"
button.Parent = screenGui

الانتقالات

تتيح لك انتقالات CSS الانتقالات تغيير قيم الخصائص على مدى مدة محددة. يمكنك تحقيق ذلك في Roblox من خلال تعيين انتقالات الخصائص على StyleRule عبر SetPropertyTransition() (مفرد) أو SetPropertyTransitions() (المتعدد).

هذه الميزة حاليًا في النسخة التجريبية. قم بتمكينها من خلال ملف ⟩ ميزات البيتا ⟩ انتقالات التنسيق.

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>القائمة الرئيسية</button>

Luau
-- قاعدة الزر
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- محدد فئة Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- تعيين سلوكيات انتقال الخصائص
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

-- قاعدة الهوفر للزر
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- محدد الحالة
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- إنشاء زر النص
local button = Instance.new("TextButton")
button.Text = "القائمة الرئيسية"
button.Parent = screenGui

التداخل والدمج

يسحب مفهومًا من SCSS، يمكن أن تتداخل StyleRules معًا وتندمج محدداتها.

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>تعويذات</button>
	<button>مانا</button>
	<button>لفافات</button>  
</div>

Luau
-- قاعدة إطار القائمة
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

-- قاعدة تخطيط القائمة
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 -- تعيين قاعدة إطار القائمة كوالد

-- قاعدة الزر
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 -- تعيين قاعدة تخطيط القائمة كوالد

-- قاعدة الهوفر للزر
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- تعيين قاعدة الزر كوالد

-- إنشاء إطار الوالد
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- إنشاء الأزرار داخل الإطار
local button1 = Instance.new("TextButton")
button1.Text = "تعويذات"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "مانا"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "لفافات"
button3.Parent = menuFrame