Web Browser Support - Optimizely CMS 12

Exam Area: Area 1 – Product Knowledge (15%) Reference: https://docs.developers.optimizely.com/content-management-system/docs/browser-support

---

1. CMS Edit UI Browser Support

The Optimizely CMS Edit View is a complex single-page application built on the Dojo JavaScript framework. It requires a modern, evergreen browser.

Key exam point: CMS 12 does not support Internet Explorer. The CMS UI depends on modern Web APIs (ES6+, CSS Grid, Fetch API) unavailable in IE.

---

2. Why IE Is Not Supported

CMS 12 is built on ASP.NET Core and uses modern web standards:

• ES Modules / ES6+ – arrow functions, Promises, async/await
• CSS Custom Properties – not supported in IE
• CSS Grid / Flexbox – IE partial support only
• Fetch API – IE requires polyfill
• Web Components – not supported in IE

---

3. Frontend (Visitor-Facing) Browser Support

For the public-facing website (what visitors see), browser support is determined by the developer's implementation, not by Optimizely:

CMS renders → Raw HTML + CSS + JS
                  ↓
Developer controls polyfills, transpilation (Babel), and target browsers

Best practices:

• Use browserslist / .browserslistrc to define targets
• Run Babel for JS transpilation (if targeting older browsers)
• Use Autoprefixer for CSS vendor prefixes
• Test with BrowserStack or Sauce Labs

---

4. Mobile Browser Support

The Optimizely Edit UI is not optimised for mobile browsers. It is designed for desktop usage (editors working on a full-size screen).

The visitor-facing website can fully support mobile browsers — the developer is responsible.

---

5. Detecting Edit Mode in Code

In some cases, templates need to behave differently in Edit Mode vs. normal visitor view:

// Inject IContextModeResolver
public class MyController : PageController<StartPage>
{
    private readonly IContextModeResolver _contextModeResolver;

    public MyController(IContextModeResolver contextModeResolver)
    {
        _contextModeResolver = contextModeResolver;
    }

    public ActionResult Index(StartPage currentPage)
    {
        if (_contextModeResolver.CurrentMode == ContextMode.Edit)
        {
            // Running inside CMS Edit View
        }
        return View(currentPage);
    }
}

@* In a Razor View *@
@inject EPiServer.Web.IContextModeResolver ContextModeResolver

@if (ContextModeResolver.CurrentMode == ContextMode.Edit)
{
    <div class="editor-hint">You are in Edit Mode</div>
}

---

6. ContextMode Enum

---

7. Content Security Policy (CSP)

When running CMS 12 in a browser, be aware of CSP considerations:

• The Edit UI injects inline scripts and styles (from Dojo)
• Avoid strict CSP rules that block the Edit UI
• Use separate CSP policies for Edit vs. public routes

// In Program.cs - only apply strict CSP on non-CMS routes
app.UseWhen(ctx => !ctx.Request.Path.StartsWithSegments("/episerver"), appBuilder =>
{
    appBuilder.UseMiddleware<ContentSecurityPolicyMiddleware>();
});

---

8. Accessibility

The CMS Edit UI follows WCAG 2.1 AA accessibility guidelines. Custom UI extensions and gadgets developed by developers should also aim to meet WCAG 2.1 AA.

---

Review Questions

1. Which browser is not supported by the Optimizely CMS 12 Edit UI? (Internet Explorer 11)
2. Who determines the browser support for the visitor-facing website? (The developer)
3. Which ContextMode is active during on-page editing? (ContextMode.Edit)
4. What interface resolves the current context mode? (IContextModeResolver)
5. Is the CMS Edit UI optimised for mobile browsers? (No – desktop only)