0
# CSS and Styling
1

2
Advanced CSS manipulation including class management, style properties, computed styles, and element dimensions. Provides comprehensive styling control with cross-browser compatibility.
3

4
## Capabilities
5

6
### CSS Properties
7

8
Get and set CSS properties with automatic vendor prefixing and unit handling.
9

10
```javascript { .api }
11
/**
12
 * Get or set CSS properties on elements
13
 * @param property - CSS property name, array of names, or object of name/value pairs
14
 * @param value - Property value (if setting single property)
15
 * @returns Property value, object of values, or collection
16
 */
17
$.fn.css(property, value);
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
// Get single property
24
const color = $('.element').css('color');
25
const fontSize = $('.element').css('font-size');
26

27
// Get multiple properties
28
const styles = $('.element').css(['width', 'height', 'margin']);
29
// Returns: {width: '200px', height: '100px', margin: '10px'}
30

31
// Set single property
32
$('.element').css('background-color', 'red');
33
$('.element').css('width', 200); // Automatically adds 'px'
34

35
// Set multiple properties
36
$('.element').css({
37
  'background-color': 'blue',
38
  'font-size': '16px',
39
  'margin': '10px 20px'
40
});
41

42
// Remove property
43
$('.element').css('background-color', '');
44
```
45

46
### CSS Classes
47

48
Manage CSS classes with add, remove, toggle, and check operations.
49

50
```javascript { .api }
51
/**
52
 * Add CSS classes to elements
53
 * @param name - Class name(s) to add (space-separated or function)
54
 * @returns Original collection
55
 */
56
$.fn.addClass(name);
57

58
/**
59
 * Remove CSS classes from elements
60
 * @param name - Class name(s) to remove (space-separated or function)
61
 * @returns Original collection
62
 */
63
$.fn.removeClass(name);
64

65
/**
66
 * Toggle CSS classes on elements
67
 * @param name - Class name(s) to toggle (space-separated or function)
68
 * @param when - Optional boolean to force add (true) or remove (false)
69
 * @returns Original collection
70
 */
71
$.fn.toggleClass(name, when);
72

73
/**
74
 * Check if elements have specific CSS class
75
 * @param name - Class name to check
76
 * @returns True if any element has the class
77
 */
78
$.fn.hasClass(name);
79
```
80

81
**Usage Examples:**
82

83
```javascript
84
// Add classes
85
$('.element').addClass('active');
86
$('.element').addClass('active selected important');
87

88
// Remove classes
89
$('.element').removeClass('inactive');
90
$('.element').removeClass('old deprecated');
91
$('.element').removeClass(); // Remove all classes
92

93
// Toggle classes
94
$('.button').toggleClass('pressed');
95
$('.menu').toggleClass('open closed');
96

97
// Conditional toggle
98
$('.item').toggleClass('highlighted', isSelected);
99

100
// Check for class
101
if ($('.element').hasClass('active')) {
102
  console.log('Element is active');
103
}
104

105
// Dynamic class names
106
$('.item').addClass(function(index, currentClass) {
107
  return 'item-' + index + (currentClass ? ' modified' : '');
108
});
109
```
110

111
### Element Dimensions
112

113
Get and set element dimensions including width, height, and positioning.
114

115
```javascript { .api }
116
/**
117
 * Get or set element width
118
 * @param value - Width value to set (number, string, or function)
119
 * @returns Width in pixels (if getting) or collection (if setting)
120
 */
121
$.fn.width(value);
122

123
/**
124
 * Get or set element height
125
 * @param value - Height value to set (number, string, or function)
126
 * @returns Height in pixels (if getting) or collection (if setting)
127
 */
128
$.fn.height(value);
129
```
130

131
**Usage Examples:**
132

133
```javascript
134
// Get dimensions
135
const width = $('.element').width();
136
const height = $('.element').height();
137

138
// Set dimensions
139
$('.element').width(200);
140
$('.element').height('100px');
141

142
// Set with function
143
$('.item').width(function(index, currentWidth) {
144
  return currentWidth * 1.5; // Increase by 50%
145
});
146

147
// Handle different element types
148
$('.image').width(); // Content width
149
$(window).width(); // Viewport width
150
$(document).width(); // Document width
151
```
152

153
### Element Positioning
154

155
Get element position information and offset coordinates.
156

157
```javascript { .api }
158
/**
159
 * Get or set element offset position relative to document
160
 * @param coordinates - Object with top/left properties (if setting)
161
 * @returns Position object or collection
162
 */
163
$.fn.offset(coordinates);
164

165
/**
166
 * Get element position relative to offset parent
167
 * @returns Position object with top/left properties
168
 */
169
$.fn.position();
170

171
/**
172
 * Get offset parent element
173
 * @returns Collection containing offset parent
174
 */
175
$.fn.offsetParent();
176

177
/**
178
 * Get or set scroll top position
179
 * @param value - Scroll position to set
180
 * @returns Scroll position or collection
181
 */
182
$.fn.scrollTop(value);
183

184
/**
185
 * Get or set scroll left position
186
 * @param value - Scroll position to set
187
 * @returns Scroll position or collection
188
 */
189
$.fn.scrollLeft(value);
190
```
191

192
**Usage Examples:**
193

194
```javascript
195
// Get offset position
196
const offset = $('.element').offset();
197
console.log('Position:', offset.top, offset.left);
198

199
// Set offset position
200
$('.draggable').offset({top: 100, left: 200});
201

202
// Get relative position
203
const position = $('.child').position();
204
console.log('Relative to parent:', position.top, position.left);
205

206
// Scroll operations
207
const scrollTop = $(window).scrollTop();
208
$(window).scrollTop(0); // Scroll to top
209

210
$('#container').scrollLeft(100);
211

212
// Smooth scrolling effect
213
$('html, body').animate({scrollTop: 0}, 500);
214
```
215

216
### Visibility Control
217

218
Show, hide, and toggle element visibility.
219

220
```javascript { .api }
221
/**
222
 * Show hidden elements
223
 * @returns Original collection
224
 */
225
$.fn.show();
226

227
/**
228
 * Hide visible elements
229
 * @returns Original collection
230
 */
231
$.fn.hide();
232

233
/**
234
 * Toggle element visibility
235
 * @param setting - Optional boolean to force show (true) or hide (false)
236
 * @returns Original collection
237
 */
238
$.fn.toggle(setting);
239
```
240

241
**Usage Examples:**
242

243
```javascript
244
// Basic visibility
245
$('.element').show();
246
$('.element').hide();
247
$('.element').toggle();
248

249
// Conditional toggle
250
$('.optional').toggle(shouldShow);
251

252
// Show/hide based on condition
253
if (isLoggedIn) {
254
  $('.user-menu').show();
255
  $('.login-form').hide();
256
} else {
257
  $('.user-menu').hide();
258
  $('.login-form').show();
259
}
260
```
261

262
### Style Utilities
263

264
Helper functions for working with styles and CSS values.
265

266
```javascript { .api }
267
// Internal utility functions (accessible via $.fn methods)
268

269
/**
270
 * Convert CSS property names to camelCase
271
 * @param str - CSS property name
272
 * @returns CamelCase property name
273
 */
274
$.camelCase(str);
275

276
/**
277
 * Get computed style for element
278
 * Uses getComputedStyle with cross-browser compatibility
279
 */
280
// Used internally by css() method
281
```
282

283
**Usage Examples:**
284

285
```javascript
286
// Camel case conversion
287
$.camelCase('background-color'); // 'backgroundColor'
288
$.camelCase('font-size'); // 'fontSize'
289

290
// Working with computed styles
291
const computedColor = $('.element').css('color');
292
const computedMargin = $('.element').css('margin-top');
293

294
// Check if element has specific computed value
295
if ($('.element').css('display') === 'none') {
296
  console.log('Element is hidden');
297
}
298
```
299

300
### CSS Value Handling
301

302
Automatic unit handling and value normalization.
303

304
```javascript
305
// Zepto automatically handles units for numeric CSS properties
306
$('.element').css('width', 200); // Becomes '200px'
307
$('.element').css('opacity', 0.5); // Stays as 0.5 (unitless)
308
$('.element').css('z-index', 100); // Stays as 100 (unitless)
309

310
// Properties that don't get 'px' added automatically:
311
// - opacity, z-index, font-weight, line-height, zoom
312
// - column-count, columns
313

314
// Custom unit handling
315
$('.element').css('width', '50%');
316
$('.element').css('font-size', '1.2em');
317
$('.element').css('margin', '10px 20px');
318

319
// Retrieving values
320
const width = $('.element').css('width'); // Always returns computed value
321
const opacity = $('.element').css('opacity'); // Returns number as string
322
```
323

324
### Cross-Browser Compatibility
325

326
Zepto handles various browser differences automatically:
327

328
```javascript
329
// Vendor prefixes are handled automatically
330
$('.element').css('transform', 'rotate(45deg)');
331
// Zepto applies appropriate prefixes: -webkit-, -moz-, -ms-, -o-
332

333
// SVG className support
334
$('svg .element').addClass('active'); // Works with SVG elements
335

336
// getComputedStyle fallbacks
337
// Zepto provides IE compatibility for computed styles
338

339
// CSS property mapping
340
// HTML attributes to DOM properties handled automatically:
341
// 'class' -> 'className', 'for' -> 'htmlFor', etc.
342
```
343

344
### Performance Considerations
345

346
Best practices for CSS manipulation:
347

348
```javascript
349
// Batch CSS changes
350
$('.element').css({
351
  'width': '200px',
352
  'height': '100px',
353
  'background': 'red'
354
}); // Better than multiple css() calls
355

356
// Cache frequently accessed elements
357
const $elements = $('.dynamic-items');
358
$elements.addClass('processed');
359
$elements.css('opacity', 0.8);
360

361
// Use classes over inline styles when possible
362
$('.item').addClass('highlighted'); // Better than css('background', 'yellow')
363

364
// Minimize reflow/repaint
365
$('.container').hide(); // Hide during modifications
366
$('.container .item').addClass('modified');
367
$('.container').show(); // Show after modifications
368
```