CSS and Styling

/**
 * Get computed CSS property value from first element
 * @param propertyName - CSS property name
 * @returns Computed CSS value as string
 */
css(propertyName: string): string;

/**
 * Set CSS property on all elements
 * @param propertyName - CSS property name
 * @param value - CSS value (string, number, or function)
 * @returns jQuery object for chaining
 */
css(propertyName: string, value: string | number | function): jQuery;

/**
 * Set multiple CSS properties on all elements
 * @param properties - Object of property/value pairs
 * @returns jQuery object for chaining
 */
css(properties: object): jQuery;

// Get computed styles
const width = $('#element').css('width'); // '200px'
const color = $('.text').css('color'); // 'rgb(255, 0, 0)'
const fontSize = $('p').css('font-size'); // '16px'

// Set single property
$('#element').css('width', '300px');
$('.highlight').css('background-color', 'yellow');
$('.box').css('margin', 10); // Automatically adds 'px'

// Set multiple properties
$('.card').css({
  'width': '250px',
  'height': '150px',
  'border': '1px solid #ccc',
  'border-radius': '5px',
  'padding': '10px'
});

// Using functions
$('.item').css('width', function(index, currentWidth) {
  return parseInt(currentWidth) + 20 + 'px';
});

// Vendor prefixes handled automatically
$('.element').css('transform', 'rotate(45deg)');

/**
 * Get content height of first element or set height of all elements
 * @param value - Optional height value to set
 * @returns Height in pixels (get) or jQuery object (set)
 */
height(): number;
height(value: number | string | function): jQuery;

/**
 * Get content width of first element or set width of all elements
 * @param value - Optional width value to set
 * @returns Width in pixels (get) or jQuery object (set)
 */
width(): number;
width(value: number | string | function): jQuery;

/**
 * Get height including padding or set height
 * @param value - Optional height value to set
 * @returns Height in pixels (get) or jQuery object (set)
 */
innerHeight(): number;
innerHeight(value: number | string | function): jQuery;

/**
 * Get width including padding or set width
 * @param value - Optional width value to set
 * @returns Width in pixels (get) or jQuery object (set)
 */
innerWidth(): number;
innerWidth(value: number | string | function): jQuery;

/**
 * Get height including padding and border, optionally margin
 * @param includeMargin - Include margin in calculation
 * @param value - Optional height value to set
 * @returns Height in pixels (get) or jQuery object (set)
 */
outerHeight(includeMargin?: boolean): number;
outerHeight(includeMargin: boolean, value: number | string | function): jQuery;

/**
 * Get width including padding and border, optionally margin
 * @param includeMargin - Include margin in calculation
 * @param value - Optional width value to set
 * @returns Width in pixels (get) or jQuery object (set)
 */
outerWidth(includeMargin?: boolean): number;
outerWidth(includeMargin: boolean, value: number | string | function): jQuery;

// Get dimensions
const contentHeight = $('#box').height(); // Content height only
const totalHeight = $('#box').outerHeight(true); // Including margin
const paddingWidth = $('#box').innerWidth(); // Including padding

// Set dimensions
$('#box').height(200).width(300);
$('.sidebar').width('25%');
$('.container').outerHeight(500);

// Using functions
$('.item').height(function(index, currentHeight) {
  return currentHeight * 1.2; // Increase height by 20%
});

// Responsive sizing
$(window).resize(function() {
  $('.responsive').width($(window).width() * 0.8);
});

/**
 * Get offset coordinates relative to document or set offset
 * @param coordinates - Optional coordinates object to set position
 * @returns Offset object {top, left} (get) or jQuery object (set)
 */
offset(): {top: number, left: number};
offset(coordinates: {top: number, left: number} | function): jQuery;

/**
 * Get position relative to offset parent
 * @returns Position object {top, left}
 */
position(): {top: number, left: number};

/**
 * Get closest positioned ancestor element
 * @returns jQuery object containing offset parent
 */
offsetParent(): jQuery;

// Get position information
const offset = $('#element').offset(); // Relative to document
const position = $('#element').position(); // Relative to offset parent
const parent = $('#element').offsetParent(); // Positioned ancestor

console.log('Element is at:', offset.top, offset.left);

// Set position
$('#popup').offset({ top: 100, left: 200 });

// Position relative to another element
const buttonOffset = $('#button').offset();
$('#tooltip').offset({
  top: buttonOffset.top - 30,
  left: buttonOffset.left
});

// Using functions
$('.floating').offset(function(index, currentOffset) {
  return {
    top: currentOffset.top + 10,
    left: currentOffset.left + 10
  };
});

/**
 * Get or set horizontal scroll position
 * @param value - Optional scroll position to set
 * @returns Scroll position (get) or jQuery object (set)
 */
scrollLeft(): number;
scrollLeft(value: number): jQuery;

/**
 * Get or set vertical scroll position
 * @param value - Optional scroll position to set
 * @returns Scroll position (get) or jQuery object (set)
 */
scrollTop(): number;
scrollTop(value: number): jQuery;

// Get scroll position
const scrollTop = $(window).scrollTop();
const scrollLeft = $('#container').scrollLeft();

// Set scroll position
$(window).scrollTop(0); // Scroll to top
$('#container').scrollLeft(100);

// Smooth scrolling to element
const targetOffset = $('#target').offset().top;
$('html, body').animate({
  scrollTop: targetOffset
}, 500);

// Scroll event handling
$(window).scroll(function() {
  const scrolled = $(this).scrollTop();
  if (scrolled > 100) {
    $('#back-to-top').fadeIn();
  } else {
    $('#back-to-top').fadeOut();
  }
});

/**
 * Get computed style value for element
 * @param element - Target element
 * @param property - CSS property name
 * @param extra - Additional calculation parameters
 * @param styles - Pre-computed styles object
 * @returns Computed CSS value
 */
$.css(element: Element, property: string, extra?: any, styles?: object): string;

/**
 * Set inline style property on element
 * @param element - Target element
 * @param property - CSS property name
 * @param value - CSS value to set
 * @param extra - Additional parameters
 */
$.style(element: Element, property: string, value: string, extra?: any): void;

// CSS hooks for custom properties
$.cssHooks[property: string] = {
  get: function(elem: Element, computed: boolean, extra: any): string;
  set: function(elem: Element, value: string): void;
};

// CSS number properties (don't need 'px' suffix)
$.cssNumber[property: string] = true;

// CSS property name mappings
$.cssProps[property: string] = string;

// Custom CSS hook for transform
$.cssHooks.transform = {
  get: function(elem) {
    return elem.style.transform || 
           elem.style.webkitTransform || 
           elem.style.mozTransform || '';
  },
  set: function(elem, value) {
    elem.style.transform = value;
    elem.style.webkitTransform = value;
    elem.style.mozTransform = value;
  }
};

// Now transform works with .css()
$('#element').css('transform', 'rotate(45deg)');

// Custom numeric property
$.cssNumber.customProperty = true;
$('#element').css('customProperty', 10); // No 'px' added

// Property name mapping
$.cssProps.customProp = 'webkitCustomProp';
$('#element').css('customProp', 'value'); // Sets webkitCustomProp

// Responsive breakpoints
function updateLayout() {
  const width = $(window).width();
  
  if (width < 768) {
    $('.sidebar').css('width', '100%');
    $('.content').css('margin-left', 0);
  } else {
    $('.sidebar').css('width', '250px');
    $('.content').css('margin-left', '250px');
  }
}

$(window).resize(updateLayout);
updateLayout(); // Initial call

// Dynamic theming
function applyTheme(theme) {
  const themes = {
    dark: {
      'background-color': '#333',
      'color': '#fff',
      'border-color': '#666'
    },
    light: {
      'background-color': '#fff',
      'color': '#333',
      'border-color': '#ccc'
    }
  };
  
  $('body').css(themes[theme]);
}

// Conditional styling
$('.item').each(function() {
  const priority = $(this).data('priority');
  $(this).css('border-left-color', 
    priority === 'high' ? 'red' : 
    priority === 'medium' ? 'orange' : 'green'
  );
});

// Animation-based styling
$('.item').hover(
  function() {
    $(this).css({
      'transform': 'scale(1.05)',
      'transition': 'transform 0.2s ease'
    });
  },
  function() {
    $(this).css('transform', 'scale(1)');
  }
);

// Batch CSS changes for better performance
$('.items').css({
  'width': '200px',
  'height': '150px',
  'margin': '10px',
  'border': '1px solid #ccc'
}); // Single reflow/repaint

// Avoid this (multiple reflows/repaints)
$('.items').css('width', '200px')
          .css('height', '150px')
          .css('margin', '10px')
          .css('border', '1px solid #ccc');

// Cache jQuery objects and dimensions
const $window = $(window);
const windowWidth = $window.width();
const windowHeight = $window.height();

$('.responsive').each(function() {
  const $this = $(this);
  $this.css({
    'width': windowWidth * 0.8,
    'height': windowHeight * 0.6
  });
});