Skip to main content

Quirks

CSS Joke

content: ''; for decorative pseudo-element​

The content: ''; property in CSS has a specific purpose in UX design, but it's important to understand its limitations and potential drawbacks.

Purpose:

  • Generating Decorative Content: The primary use of content: ''; is to generate decorative elements like pseudo-elements ("::before" and "::after") for styling purposes. These elements don't have any inherent content, so you can use content: ''; to create things like:
    • Bullet points with custom shapes
    • Checkboxes with custom icons
    • Decorative borders or dividers

Impact on UX:

  • Visual Consistency: By using content: ''; for pseudo-elements, you can achieve a more visually consistent design across different browsers. This can enhance the overall user experience by providing a clear and polished interface.
  • Accessibility: However, it's important to note that content: ''; alone doesn't provide any semantic meaning for screen readers or assistive technologies. If these decorative elements are crucial for understanding the content, you might need to combine them with other techniques like adding aria-label attributes or using appropriate HTML elements.

Alternatives and Considerations:

  • Limited Functionality: content: ''; can't be used to dynamically generate actual content like text or numbers. If you need to create dynamic content, consider using JavaScript or server-side scripting.
  • Overuse: Using content: ''; excessively can lead to bloated CSS and potentially impact performance. It's generally recommended to use it sparingly for specific decorative elements.
  • Browser Compatibility: While widely supported, there might be some edge cases or older browsers where content: ''; behaves differently. Thorough testing across different browsers is essential.

In summary:

Use content: ''; strategically for generating decorative pseudo-elements to enhance visual consistency in your design. Be mindful of accessibility concerns and consider alternative approaches for dynamic content or complex interactions.

box-sizing​

The box-sizing property affects how the total width and height of an element are calculated, especially when it has padding and borders.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Input Box</title>
    <style>
<body>
    <input type="text" class="custom-input" placeholder="Enter text here">
</body>
</html>
input.custom-input {
    box-sizing: border-box;
    width: 300px;
    height: 40px;
    border-top: 3px solid lightgray;
    border-bottom: 3px solid darkgray;
    border-left: 3px solid darkgray;
    border-right: 3px solid darkgray;
    padding: 10px;
    font-size: 16px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

https://davesmyth.com/things-i-wish-id-known-about-css

:empty selector​

:empty

Break word​

Word Wrap when it overflows container​

overflow-wrap and word-break are CSS properties that are used to control how long words are handled in text that overflows its container.

overflow-wrap is used to control how long words are wrapped in a block of text when they exceed the width of the container. The overflow-wrap property has two possible values: normal and break-word.

  • overflow-wrap: normal (default) - This value allows long words to overflow the container and continue onto the next line.
  • overflow-wrap: break-word - This value breaks words at arbitrary points to prevent them from overflowing the container. This can result in hyphenated or broken words, but it ensures that the text fits within the container.

Here is an example:

p {
  width: 200px;
  overflow-wrap: break-word;
}

In this example, the overflow-wrap property is used to break words at arbitrary points when the text exceeds the width of the container.

word-break is used to control how long words are broken and wrapped in a block of text. The word-break property has three possible values: normal, break-all, and keep-all.

  • word-break: normal (default) - This value allows long words to break only at allowed break points.
  • word-break: break-all - This value allows long words to break at any point, even if it is within a word.
  • word-break: keep-all - This value does not allow words to break, even if they are longer than the container width.

Here is an example:

p {
  width: 200px;
  word-break: break-all;
}

In this example, the word-break property is used to break words at any point, even if it is within a word.

Overall, overflow-wrap and word-break are useful CSS properties that allow you to control how long words are handled in text that overflows its container. By using these properties, you can ensure that your text fits within the available space without sacrificing readability.

.fix-word-wrap {
  overflow-wrap: break-word;
  word-break: break-all;
}

Scroll Ideas​

When using the CSS overflow-x: scroll property to create horizontal scrolling in a web design, there are several UX design ideas you can consider to enhance the user experience:

  1. Indicate scrollability: Make it clear to users that the content is horizontally scrollable. You can use visual cues like arrows or scroll indicators at the edges of the container to indicate that there is more content to be scrolled horizontally.

  2. Responsive design: Ensure that the horizontally scrollable content adapts well to different screen sizes and orientations. Consider using media queries and responsive design techniques to adjust the layout and appearance of the content based on the available screen space.

  3. Smooth scrolling: Apply smooth scrolling behavior to the horizontal scrolling, so the content glides smoothly when users scroll horizontally. This can create a more pleasing and natural scrolling experience.

  4. Snap scrolling: Implement a snapping behavior where the content aligns to specific positions as users scroll horizontally. This can help users navigate through the content more easily and provide a sense of control and precision.

  5. Scroll hints: If the horizontally scrollable content contains important or interesting elements that may not be immediately visible, consider adding visual cues or hints to guide users to scroll horizontally. This can be done through subtle animations or overlays to draw attention to hidden content.

  6. Pagination: If the horizontally scrollable content is divided into distinct sections or pages, consider implementing pagination indicators or buttons that allow users to navigate directly to specific sections instead of relying solely on scrolling.

  7. Touch-friendly interactions: Ensure that the horizontal scrolling works well on touch devices by optimizing the scrolling behavior for touch gestures. This includes considering swipe gestures for scrolling and making sure the scrolling experience is smooth and responsive on touchscreens.

  8. Accessibility considerations: Take into account accessibility guidelines when implementing horizontal scrolling. Ensure that the content remains accessible to users with disabilities or those who rely on assistive technologies by providing alternative ways to access and navigate the content, such as keyboard support or accessible scroll controls.

Remember, it's important to test and iterate on the design to ensure that the horizontal scrolling implementation provides a seamless and intuitive user experience across different devices and user scenarios.

iOS / Safari CSS Quirks​

The CSS @supports rule is primarily used to apply styles based on the browser's support for a particular CSS feature or property. It can be used to target specific browser versions or platforms, such as iOS-specific designs for Safari.

To create an iOS-specific design for a Safari checkbox, you can use the @supports rule in combination with other CSS selectors. Here's an example:

/* Apply iOS-specific styles for Safari checkbox */
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) {
  /* Target Safari on iOS */
  input[type="checkbox"] {
    /* Apply specific styles for Safari checkbox */
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #ccc;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }

  input[type="checkbox"]:checked {
    background-color: #007aff;
  }

  /* Additional Safari-specific styles... */
}

In this example, the @supports rule checks if the browser supports the -webkit-appearance property and the -webkit-marquee property (which is not supported on Safari). If both conditions are true, the styles inside the @supports block will be applied.

The styles inside the @supports block modify the appearance of the checkbox, such as removing the default browser styles (-webkit-appearance: none; appearance: none;), setting a custom border, border-radius, width, height, and background color. You can add additional styles as needed for your specific design requirements.

Remember to test your design on multiple iOS devices and browser versions to ensure compatibility and adjust the styles accordingly if needed.